基于cropper.js封装vue在线图片裁剪组件

github:demo下载

cropper.js

github:cropper.js

官网（demo）

cropper.js 安装

• npm或bower安装

npm install cropper
# or
bower install cropper

• clone下载：下载地址

git clone https://github.com/fengyuanchen/cropper.git

引用cropper.js

• 主要引用cropper.js跟cropper.css两个文件

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

注意：必须先引入jquery文件，才能使用cropper.js插件

简单使用

• 构建截图所要用到的div容器

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  ![](picture.jpg)
</div>

• 添加容器的样式，让img填充满整个容器（很重要）

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

• 调用cropper.js方法，初始化截图控件

$('#image').cropper({
  aspectRatio: 16 / 9,
  crop: function(e) {
   
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});

其他详细api请参考：github:cropper.js

封装成vue组件

封装成vue组件中需解决的问题

• cropper.js相关
  
  • 模拟input框点击选择图片并对选择的图片进行格式、大小限制
  • 重新选择图片裁剪
  • 确认裁剪并获取base64格式的图片信息
• vue相关
  
  • 非父子组件之间的通信问题

模拟input框点击选择图片并对选择的图片进行格式、大小限制

• 构建一个隐藏的input标签，然后模拟点击此input，从而达到能选择图片的功能

<!-- input框 -->
<input id="myCropper-input" type="file" :accept="imgCropperData.accept" ref="inputer" @change="handleFile">

//模拟点击
document.getElementById('myCropper-input').click();

• 给input绑定一个监听内容变化的方法，拿到上传的文件，并进行格式、大小校验

// imgCropperData: {
   
//   accept: 'image/gif, image/jpeg, image/png, image/bmp',
// }
handleFile (e) {
  let _this = this;
  let inputDOM = this.$refs.inputer;
  // 通过DOM取文件数据
  _this.file = inputDOM.files[0];
  // 判断文件格式
  if (_this.imgCropperData.accept.indexOf(_this.file.type) == -1) {
    _this.$Modal.error({
      title: '格式错误',
      content: '您选择的图片格式不正确！'
    });
    return;
  }
  // 判断文件大小限制
  if (_this.file.size > 5242880) {
    _this.$Modal.error({
      title: '超出限制',
      content: '您选择的图片过大，请选择5MB以内的图片！'
    });
    return;
  }
  var reader = new FileReader();
  // 将图片将转成 base64 格式
  reader.readAsDataURL(_this.file);
  reader.onload = function () {
   
    _this.imgCropperData.imgSrc = this.result;
    _this.initCropper();
  }
}

参考:从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

重新选择图片裁剪

• 当第一次选择图片之后，肯定会面临需要重选图片的问题，那么就会面临如何替换掉裁剪框中的图片，上面的步骤选择了图片后通过FileRender()方法拿到了图片的主要信息，现在就需要重新构建裁剪框就可以解决问题了，查看cropper.js给出的官方demo，发现官方是使用动态添加裁剪容器的方法，进行操作的，这里我们仿照官方进行实现。

// 初始化剪切
  initCropper () {
    let _this =