立志作一個最好用的移動端圖片裁剪插件

vue-image-cropper 基於vue的圖片壓縮裁剪插件

1.功能說明

圖片壓縮，圖片裁剪，vue圖片壓縮，vue圖片裁剪，vue-image-cropper，解決了部分機型方向不對的問題，同時能夠對圖片進行尺寸和質量的壓縮

2.效果演示(chrome調試模式下或者手機打開)

3.本地運行

git clone https://github.com/Q956164483/vue-image-cropper.git
cd vue-image-cropper
yarn
yarn run dev

4.使用

1. copy本項目的 ./src/components/imageCropper.vue文件 (imageCropper.vue須要引入exif-small.js)
2. 在須要使用的頁面直接引入imageCropper組件並綁定cropperConfig配置參數和裁剪以後的回調函數callback

<image-cropper ref="imageCropper" :cropperConfig="cropperConfig" :callback="loadImage"></image-cropper>

loadImage (data) {
  console.log(data)
  // data爲base64字符串
}

5.git地址

6.參數說明

cropperConfig: {
  width: 1, // 裁剪寬度（比例）
  height: 1, // 裁剪高度（比例）
  quality: 0.7, // 圖片質量（0~1之間）
  maxWidth: 750 // 導出的圖片的最大寬度
}

目前這個組件已經在咱們的多個項目上用到，暫未發現問題，歡迎提問題一塊兒完善，若是幫您解決了問題，請給個star，謝謝啦0.0