cropper js基于vue的图片裁剪上传功能。

前端时间公司的vue项目需要头像裁剪上传功能，看了一篇博客，在此基础上做的修改完成了这个功能，与大家分享一下。原文：http://m.blog.csdn.net/JaneLittle/article/details/72037910。

首先下载引入cropper js，

npm install cropper js --save

在需要的页面引入：import Cropper from "cropper js"

html的代码如下：

<template>    <div id="demo">      <!-- 遮罩层 -->      <div class="container" v-show="panel">          <div>              <img id="image" :src="url" alt="Picture">          </div>          <button type="button" id="button" @click="commit">确定</button>          <button type="button"id="cancel" @click="cancel">取消</button>     </div>        <div style="padding:20px;">          <div class="show">            <div class="picture" :style="'backgroundImage:url('+headerImage+')'">            </div>          </div>          <div style="margin-top:20px;text-align: left;">            <input type="file" id="change" accept="image" @change="change">            <label for="change"></label>          </div>                </div>    </div>  </template>

主要是js代码，如下

1，data里面定好初始变量，绑定数据，imgCropperData是我定义的判断图片格式的。

data() {    return {      headerImage: "",      picValue: "",      cropper: "",      croppable: false,      panel: false,      url: "",      imgCropperData: {        accept: "image/gif, image/jpeg, image/png, image/jpg"      }    };  }

2，在mounted里面初始换裁剪框

mounted() {    //初始化这个裁剪框    var self = this;    var image = document.getElementById("image");    this.cropper = new Cropper(image, {      aspectRatio: 1,      viewMode: 1,      background: false,      zoomable: false,      ready: function() {        self.croppable = true;      }    });  }

3.methods的方法比较多，包括创建URL路径，input框change事件，canvas画图，确定提交上传。我还加了取消事件函数，判断上传文件的类型和大小。

methods: {    //取消上传    cancel() {        this.panel = false;        var obj = document.getElementById('change') ;         obj.outerHTML=obj.outerHTML;     },    //创建url路径    getObjectURL(file) {      var url = null;      if (window.createObjectURL != undefined) {        // basic        url = window.createObjectURL(file);      } else if (window.URL != undefined) {        // mozilla(firefox)        url = window.URL.createObjectURL(file);      } else if (window.webkitURL != undefined) {        // webkit or chrome        url = window.webkitURL.createObjectURL(file);      }      return url;    },    //input框change事件，获取到上传的文件    change(e) {      let files = e.target.files || e.dataTransfer.files;      if (!files.length) return;      let type = files[0].type; //文件的类型，判断是否是图片      let size = files[0].size; //文件的大小，判断图片的大小      if (this.imgCropperData.accept.indexOf(type) == -1) {        alert("请选择我们支持的图片格式！");        return false;      }      if (size > 5242880) {        alert("请选择5M以内的图片！");        return false;      }      this.picValue = files[0];      this.url = this.getObjectURL(this.picValue);      //每次替换图片要重新得到新的url      if (this.cropper) {        this.cropper.replace(this.url);      }      this.panel = true;    },    //确定提交    commit() {      this.panel = false;      var croppedCanvas;      var roundedCanvas;      if (!this.croppable) {        return;      }      // Crop      croppedCanvas = this.cropper.getCroppedCanvas();      // Round      roundedCanvas = this.getRoundedCanvas(croppedCanvas);      this.headerImage = roundedCanvas.toDataURL();      //上传图片      this.postImg();    },    //canvas画图    getRoundedCanvas(sourceCanvas) {      var canvas = document.createElement("canvas");      var context = canvas.getContext("2d");      var width = sourceCanvas.width;      var height = sourceCanvas.height;      canvas.width = width;      canvas.height = height;      context.imageSmoothingEnabled = true;      context.drawImage(sourceCanvas, 0, 0, width, height);      context.globalCompositeOperation = "destination-in";      context.beginPath();      context.arc(        width / 2,        height / 2,        Math.min(width, height) / 2,        0,        2 * Math.PI,        true      );      context.fill();      return canvas;    },    //提交上传函数    postImg() {      alert("上传成功");      //这边写图片的上传    }  }

css样式代码就不贴出来了，可以到GitHub上下载https://github.com/leileibrother/cropper-js-vue-。

测试完遇到一个蛋疼的问题：第一次选择图片所有的操作都正常，第二次再选择同一张图片时change事件不触发了，只能选择不同的图片才可以。不知道有没有解决过这种问题的，请教各位了！