Vue中使用Cropper.js裁剪图片

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

github： 

网站： 

简单使用

使用很简单，首先需要一个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 = window.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')
    },

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

options

cropper还有很多有用的选项，比较重要的：

viewmode

number，默认值0，可选值0,1,2,3

cropper容器基本有4个部分，官网示例：

mode为0的情况下，crop box部分可以超出canvans的范围，mode为1,2,3时crop box被限制在canvas范围之内，mode为2,3时会将canvas限制在container之内。

image与crop box都是可以移动的，双击可以切换move mode与crop mode。

aspectratio

number，croper box的宽高比，可以为裁剪设置固定的宽高比，值为nan时，可*裁剪。可以使用shift键来切换或者固定宽高比。

data

object，可以用来预设crop box，初始化的时候提供给setdata()使用。

checkcrossorigin

boolean，默认值true。检查图片是否跨域，图片跨域时会为图片添加crossorigin属性，并为图片地址添加一个随机时间戳避免缓存。

<img crossorigin="anonymous" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg?timestamp=1547879277777" class="cropper-hide" style="width: 752px; height: 423px; transform: none;">

methods

crop()

显示crop box

new cropper(image, {
  autocrop: false,
  ready() {
    // do something here
    // ...

    // and then
    this.cropper.crop();
  },
});

reset()

将crop box置于初始的状态，宽高比，大小等。

clear()

清除crop box

destroy()

destroy cropper实例。

replace(url[, hassamesize])

替换img的url地址。

move(offsetx[, offsety])，moveto(x[, y])

移动canvas

zoom(ratio)，zoomto(ratio[, pivot])

放大或者缩小canvas

rotate(degree)，rotateto(degree)

旋转image

scale(scalex[, scaley])，scalex(scalex)，scaley(scaley)

改变image的宽高比，拉伸等。

getdata([rounded])，setdata(data)

获取，设置croper box的实际位置，大小数据

getcontainerdata()

获取container的大小数据

getimagedata()

获取image的位置，大小等相关信息。

getcanvasdata()，setcanvasdata(data)

获取canvas的位置，大小信息。

getcropboxdata()，setcropboxdata(data)

获取crop box的位置，大小信息等，与getdata()的区别是，getdata()是获取的实际大小，getcropboxdata()获取的是显示大小，因为image一般是缩小显示的。

getcroppedcanvas([options])

比较重要的方法，获取一个htmlcanvaselement元素，绘制了整个crop box。

可以在options中设置宽高，也可以取默认值：

cropper.getcroppedcanvas({
  width: 160,
  height: 90,
  minwidth: 256,
  minheight: 256,
  maxwidth: 4096,
  maxheight: 4096,
  fillcolor: '#fff',
  imagesmoothingenabled: false,
  imagesmoothingquality: 'high',
});

　转为blob：

// upload cropped image to server if the browser supports `htmlcanvaselement.toblob`
cropper.getcroppedcanvas().toblob((blob) => {
  const formdata = new formdata();

  formdata.append('croppedimage', blob);

  // use `jquery.ajax` method
  $.ajax('/path/to/upload', {
    method: "post",
    data: formdata,
    processdata: false,
    contenttype: false,
    success() {
      console.log('upload success');
    },
    error() {
      console.log('upload error');
    },
  });
});

　转为base64 url:

cropper.getcroppedcanvas().todataurl('image/png')

　如果手机上不支持toblob()，有个polyfill javascript-canvas-to-blob 。

setaspectratio(aspectratio)

设置crop box的宽高比。

events

cropper实例是挂在img上的，可以为目标img添加事件

ready

img已加载好，cropper实例可以被操作了：

let cropper;

image.addeventlistener('ready', function () {
  console.log(this.cropper === cropper);
  // > true
});

cropper = new cropper(image);

cropstart

开始裁剪

cropmove

裁剪时事件

cropend

裁剪结束事件

crop

crop box发生变化时的事件。

这些事件都可以放在cropper的options之中。

比如，限定裁剪时的宽高比：

    initcropper () {
      let cropper = new cropper(this.$refs.img, {
        viewmode: 1,
        cropmove () {
          const cropper = this.cropper;
          const minaspectratio = 0.5
          const maxaspectratio = 1.5
          const cropboxdata = cropper.getcropboxdata();
          const aspectratio = cropboxdata.width / cropboxdata.height;
          if (aspectratio < minaspectratio) {
            cropper.setcropboxdata({
              width: cropboxdata.height * minaspectratio
            });
          } else if (aspectratio > maxaspectratio) {
            cropper.setcropboxdata({
              width: cropboxdata.height * maxaspectratio
            });
          }
        }
      })
      this.cropper = cropper
    },