本文介紹了vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例，分享給大家，具體如下：
成都創(chuàng)新互聯(lián)專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國電信/網(wǎng)通/移動(dòng)機(jī)房，成都服務(wù)器托管服務(wù)有保障！
代碼地址：https://github.com/jczzq/vue-image-crop
vue-image-crop
基于Vue的移動(dòng)端圖片裁剪組件
重慶分公司
重慶分公司
組件使用URL.createObjectURL()等新特性，使用前注意兼容問題。IE >= 10注意：該組件適用于 PC 端，不推薦手機(jī)端使用。
功能預(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
啟動(dòng)開發(fā)模式即可定制功能
構(gòu)建
npm run build
build之后會(huì)重新生成lib文件夾
API
props
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| value | Object | {} | 裁剪后的圖片對(duì)象；必傳；可使用v-model綁定 |
| proportion | Object | { w: 2, h: 1 } | 圖片寬高比例對(duì)象；非必傳；用于動(dòng)態(tài)計(jì)算寬高比例，所以w和h兩個(gè)屬性沒有固定值 |
| quality | Number | 0.92 | 清晰度；非必傳；HTMLCanvasElement.toDataURL()的第二個(gè)參數(shù) |
| hasRemove | Boolean | false | 是否顯示移除按鈕；非必傳；列表中使用時(shí)可能會(huì)用到 |
| skipCrop | Boolean | false | 是否直接上傳；非必傳；設(shè)置為true的時(shí)候圖片將不會(huì)裁剪直接返回 |
| config | Object | { size: 1200, isSlice: true, path: null } | 配置對(duì)象；此對(duì)象不傳有默認(rèn)值，若傳時(shí)對(duì)象里的每個(gè)屬性都必須傳；size:圖片最大寬度（px），isSlice:是否需要裁剪，path:顯示圖片時(shí)的路徑，path參數(shù)將直接與圖片id拼接(path + id) |
events
| 事件名 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| remove | 移除按鈕被點(diǎn)擊時(shí)觸發(fā) | - |
| change | 改變選中圖片時(shí)觸發(fā) | event.target.files[0]，新文件 |
| submit | 圖片操作完成時(shí)觸發(fā) | 當(dāng)前裁剪后的圖片對(duì)象 |
| cancel | 圖片操作取消時(shí)觸發(fā) | - |
示例代碼
常規(guī)用法
調(diào)整比例
列表
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
