Vue中使用Cropper.js裁剪图片

Cropper.js是一款很好用的图片裁剪工具，可以对图片的尺寸、长宽比进行裁剪，满足诸如裁剪头像上传、商品图片编辑之类的需求。

github： https://github.com/fengyuanchen/cropperjs

网站： https://fengyuanchen.github.io/cropperjs/

简单使用

使用很简单，首先需要一个image或者canvas元素：

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="picture.jpg">
</div>

　　

/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

　然后使用此元素创建Cropper：

// import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

　vue代码：

<template>
  <div>
    <div style="width: 750px; height: 500px; margin: 20px; border: dashed #cacaca 1px; text-align: center;">
      <img :src="cropperImg" style="max-width: 100%" ref="img">
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
// import 'cropperjs/dist/cropper.min.css'

export default {
  name: "ImgCropper",
  data () {
    return {
      cropperImg: '',
      cropper: '',
      imgName: ''
    }
  },
  mounted () {
    this.initCropper()
  },
  methods: {
    initCropper () {
      let cropper = new Cropper(this.$refs.img, {
        viewMode: 1,
        aspectRatio: 16/9,
      })
      this.cropper = cropper
    },
  }
}
</script>

　因为img元素的src属性为空，裁剪区域显示空白。一般的需求是上传图片裁剪，添加上传图片功能：

<input type="file" @change="uploadImg" />

　　

uploadImg (event) {
  const img = event.target.files[0]
  this.cropperImg = URL.createObjectURL(img)
},

　点击上传图片后就可以裁剪了：

　将裁剪的图片保存或者上传：

    uploadCropImg () {
      const _this = this
      this.cropper.getCroppedCanvas().toBlob(async function(blob) {
        const params = new FormData()
        params.append('upload_file', blob, _this.imgName)
        $.ajax(...)
      }, 'image/jpeg')
    },

　canvas转换为Blob时注意第二个参数默认是image/png的，接口上传有大小限制的情况下，可以设置为image/jpeg。

   保存图片：

    saveCropImg () {
      const _this = this
      this.cropper.getCroppedCanvas().toBlob(function(blob) {
        const href = URL.createObjectURL(blob);
    　　const downloadElement = document.createElement('a');
    　　downloadElement.href = href;
    　　downloadElement.download = _this.imgName
    　　document.body.appendChild(downloadElement);
    　　downloadElement.click(); 
    　　document.body.removeChild(downloadElement);
    　　window.URL.revokeObjectURL(href);
      }, 'image/jpeg')
    },

　这样简单的上传、裁剪、保存功能就实现了。