官网

一、安装使用

1.安装

  1. # npm 安装
  2. npm install vue-cropper
  4. # yarn 安装
  5. yarn add vue-cropper

2.引入 Vue Cropper

Vue2 组件内引入

  1. import { VueCropper }  from 'vue-cropper' 
  2. components: {
  3.   VueCropper
  4. }

Vue2 全局引入

  1. import VueCropper from 'vue-cropper'
  2. Vue.use(VueCropper)

3.代码中使用

重要！ 需要关掉本地的 mock 服务， 不然图片转化会报错 重要！ 需要使用外层容器包裹并设置宽高

  1. <vueCropper
  2.   ref="cropper"
  3.   :img="option.img"
  4.   :outputSize="option.size"
  5.   :outputType="option.outputType"
  6. ></vueCropper>

二、项目使用

与 element 一起使用

几个方法需要单独拿出来

  1. /** base64转Blob */
  2. MixinBase64toBlob(base64) {
  3.   const byteString = atob(base64.split(',')[1])
  4.   const mimeString = base64
  5.     .split(',')[0]
  6.     .split(':')[1]
  7.     .split(';')[0]
  8.   const ab = new ArrayBuffer(byteString.length)
  9.   const ia = new Uint8Array(ab)
  10.   for (var i = 0; i < byteString.length; i++) {
  11.     ia[i] = byteString.charCodeAt(i)
  12.   }
  13.   return new Blob([ab], { type: mimeString })
  14. }
  17. /** 裁剪头像 */
  18. handleCropperCrop() {
  19.   this.$refs.cropper.getCropData(async data => {
  20.     const formData = new FormData()
  21.     formData.append('file', this.MixinBase64toBlob(data))
  22.     //上传方法
  23.     this.handleUploadFace(formData)
  24.   })
  25. },
  1. <div class="cropper-content">
  2.   <div class="cropper" style="text-align:center">
  3.     <vueCropper
  4.       ref="cropper"
  5.       :img="option.img"
  6.       :output-size="option.size"
  7.       :output-type="option.outputType"
  8.       :info="true"
  9.       :full="option.full"
  10.       :can-move="option.canMove"
  11.       :can-move-box="option.canMoveBox"
  12.       :original="option.original"
  13.       :auto-crop="option.autoCrop"
  14.       :fixed="option.fixed"
  15.       :fixed-number="option.fixedNumber"
  16.       :center-box="option.centerBox"
  17.       :info-true="option.infoTrue"
  18.       :fixed-box="option.fixedBox"
  19.       :auto-crop-width="option.autoCropWidth"
  20.       :auto-crop-height="option.autoCropHeight"
  21.       @realTime="realTime"
  22.     />
  23.   </div>
  24. </div>  
  26. //data中数据
  27. option: {
  28.   img: '', // 裁剪图片的地址
  29.   info: true, // 裁剪框的大小信息
  30.   outputSize: 1, // 裁剪生成图片的质量
  31.   outputType: 'png', // 裁剪生成图片的格式 jpeg
  32.   canScale: false, // 图片是否允许滚轮缩放
  33.   canMove: true,
  34.   autoCrop: true, // 是否默认生成截图框
  35.   autoCropWidth: 100, // 默认生成截图框宽度
  36.   autoCropHeight: 100, // 默认生成截图框高度
  37.   fixedBox: true, // 固定截图框大小 不允许改变
  38.   fixed: true, // 是否开启截图框宽高固定比例
  39.   fixedNumber: [1, 1], // 截图框的宽高比例
  40.   full: true, // 是否输出原图比例的截图
  41.   canMoveBox: true, // 截图框能否拖动
  42.   original: false, // 上传图片按照原始比例渲染
  43.   centerBox: false, // 截图框是否被限制在图片里面
  44.   infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  45. },
  47. //style
  48. .cropper-content {
  49.     padding: 0 40px;
  51.     .cropper {
  52.       width: auto;
  53.       height: 350px;
  54.     }
  55.   }

@realTime 实时预览事件

  1. realTime(data) {
  2.   var previews = data
  3.   var h = 0.5
  4.   var w = 0.2
  6.   this.previewStyle1 = {
  7.     width: previews.w + "px",
  8.     height: previews.h + "px",
  9.     overflow: "hidden",
  10.     margin: "0",
  11.     zoom: h
  12.   }
  14.   this.previewStyle2 = {
  15.     width: previews.w + "px",
  16.     height: previews.h + "px",
  17.     overflow: "hidden",
  18.     margin: "0",
  19.     zoom: w
  20.   }
  22.   // 固定为 100 宽度
  23.   this.previewStyle3 = {
  24.     width: previews.w + "px",
  25.     height: previews.h + "px",
  26.     overflow: "hidden",
  27.     margin: "0",
  28.     zoom: 100 / preview.w
  29.   }
  31.   // 固定为 100 高度
  32.   this.previewStyle4 = {
  33.     width: previews.w + "px",
  34.     height: previews.h + "px",
  35.     overflow: "hidden",
  36.     margin: "0",
  37.     zoom: 100 / preview.h
  38.   }
  39.   this.previews = data
  40. }

三、问题记录

如果图片背景透明，则vue-cropper 自动为图片填充了黑色背景

图片裁剪 vue-cropper - 图1
图片裁剪 vue-cropper - 图2

解决：
outputType设置为png
//png图片显示透明底，JPG背景都带颜色不显示透明底的
image.png
相关文章：
https://segmentfault.com/q/1010000039327449

待完善：
在 element-ui 中结合弹框组件实现
上传图片的数据相互转化

相关文章
https://juejin.cn/post/6844904154620510221