本文介紹了vue-image-crop基于Vue的移動端圖片裁剪組件示例,分享給大家,具體如下:
成都創(chuàng)新互聯(lián)專業(yè)提供成都主機托管四川主機托管成都服務(wù)器托管四川服務(wù)器托管,支持按月付款!我們的承諾:貴族品質(zhì)、平民價格,機房位于中國電信/網(wǎng)通/移動機房,成都服務(wù)器托管服務(wù)有保障!
代碼地址:https://github.com/jczzq/vue-image-crop
vue-image-crop
基于Vue的移動端圖片裁剪組件
組件使用URL.createObjectURL()
等新特性,使用前注意兼容問題。IE >= 10
注意:該組件適用于 PC 端,不推薦手機端使用。
功能預(yù)覽
快速開始
安裝Node >= 8.9.0
(推薦LTS = 8.11.0
)
# 安裝 vue-cli 3.x npm install -g @vue/cli cd vue-image-crop npm install npm run dev
啟動開發(fā)模式即可定制功能
構(gòu)建
npm run build
build之后會重新生成lib文件夾
API
props
屬性名 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
value | Object | {} | 裁剪后的圖片對象;必傳;可使用v-model綁定 |
proportion | Object | { w: 2, h: 1 } | 圖片寬高比例對象;非必傳;用于動態(tài)計算寬高比例,所以w和h兩個屬性沒有固定值 |
quality | Number | 0.92 | 清晰度;非必傳;HTMLCanvasElement.toDataURL()的第二個參數(shù) |
hasRemove | Boolean | false | 是否顯示移除按鈕;非必傳;列表中使用時可能會用到 |
skipCrop | Boolean | false | 是否直接上傳;非必傳;設(shè)置為true的時候圖片將不會裁剪直接返回 |
config | Object | { size: 1200, isSlice: true, path: null } | 配置對象;此對象不傳有默認(rèn)值,若傳時對象里的每個屬性都必須傳;size:圖片最大寬度(px),isSlice:是否需要裁剪,path:顯示圖片時的路徑,path參數(shù)將直接與圖片id拼接(path + id) |
events
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
remove | 移除按鈕被點擊時觸發(fā) | - |
change | 改變選中圖片時觸發(fā) | event.target.files[0],新文件 |
submit | 圖片操作完成時觸發(fā) | 當(dāng)前裁剪后的圖片對象 |
cancel | 圖片操作取消時觸發(fā) | - |
示例代碼
<template> <div class="ctnr"> <p>常規(guī)用法</p> <m-image-crop class="mic mic1" v-model="img"></m-image-crop> <p>調(diào)整比例</p> <m-image-crop class="mic mic2" v-model="img2" :proportion="{ w: 100, h: 35 }"></m-image-crop> <p>列表</p> <div class="list"> <div class="item" v-for="(item, index) in imgList" :key="item.id"> <m-image-crop class="mic" has-remove :value="item" :proportion="{ w: 1, h: 1 }" @remove="removeHandle(index)"></m-image-crop> </div> <div class="item add" @click="addHandle">添加圖片</div> </div> </div> </template> <script> export default { data() { return { img: {}, img2: {}, imgList: [] }; }, methods: { addHandle() { this.imgList.push({}); }, removeHandle(index) { this.imgList.splice(index, 1); } } }; </script> <style lang="less"> html, body { margin: 0; } .ctnr { height: 100vh; .mic { border: 1px dotted #4fc08d; } .mic1 { width: 200px; height: 100px; } .mic2 { width: 100vw; height: 35vw; } .list { font-size: 0; .item { box-sizing: border-box; font-size: 14px; vertical-align: middle; display: inline-block; border: 1px dotted #4fc08d; width: 33.33vw; height: 33.33vw; } .add { text-align: center; line-height: 33.33vw; } } } </style>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章標(biāo)題:vue-image-crop基于Vue的移動端圖片裁剪組件示例
網(wǎng)頁地址:http://muchs.cn/article2/ihcioc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、定制網(wǎng)站、ChatGPT、面包屑導(dǎo)航、移動網(wǎng)站建設(shè)、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)