图片剪切插件之cropper.js

文档地址

github: https://github.com/fengyuanchen/cropperjs
csdn： https://blog.csdn.net/weixin_38023551/article/details/78792400

使用方法：

1. 新建标签

2. 初始化参数

        options: {
          viewMode: 2,  // 0:无限制; 1:将裁剪框限制为不超过画布的大小, 2:限制最小画布尺寸以适应容器,如果画布和容器的比例不同，则最小画布将在其中一个维度中被额外的空格包围。, 3:限制最小画布尺寸以填充容器。如果画布和容器的比例不同，则容器将无法将整个画布适合其中一个尺寸。
          dragMode: 'move', // 'crop':创建一个新的裁剪框    'move':移动画布  'none':do nothing
          aspectRatio: 16/9,  // 设置裁剪框的宽高比。默认情况下，裁剪框是空闲比率。
          data: {}, // 如果您已经存储了以前的裁剪数据，将在构建时自动传递给setData方法。
          preview: '', //添加额外的元素（容器）进行预览。
          autoCropArea: 1,   //介于0和1之间的数字。定义自动裁剪区域大小（百分比）， 1： 完全按照最大宽度后最大高度设置剪切框
          checkCrossOrigin: true,
          movable: true,  //启用移动图像。
          rotatable: true,  //启用旋转图像。
          scalable: true,  //启用缩放图像。
          zoomable: true,  //启用缩放图像。
          zoomOnTouch: true,  //启用通过拖动触摸缩放图像。
          zoomOnWheel: true,  //启用通过滚动鼠标放大图像。。
          cropBoxMovable: true,  // 启用通过拖动来移动裁剪框。
          cropBoxResizable: true,  // 启用通过拖动调整裁剪框的大小。。
          toggleDragModeOnDblclick: false,  //在裁剪器上点击两次时，启用“切割”和“移动”之间切换拖动模式。
          minContainerWidth: 200,  //容器的最小宽度。。
          minContainerHeight: 100,  //容器的最小高度。。。
          ready: function () {
            this.cropper && this.cropper.crop();
          // 可以根据用户参入的比例， 进行更改剪切框比例
            if (this.cropObj) {
              this.cropper &&  this.cropper.setAspectRatio( (this.cropObj.width / this.cropObj.height) )
            }
          },
          crop: function (e) {
          }
        },

3. 初始化剪切区域

• 新建剪切区域， 新建完毕，
• 替换url（可根据用户传过来的url进行替换），
• 替换完毕后， 重置剪切区域

      init() {
        // this.cropper && this.cropper.destroy()
        this.cropper = new Cropper(this.$refs.cropperImg, this.options);
        this.replace(this.src)
        this.cropper &&  this.cropper.setAspectRatio( (this.cropObj.width / this.cropObj.height) )
      },

4. 完整代码

5. 功能分析

• watch
  这里面有两点

     src (val) {
        this.replace(val)
      },
     cropObj () {
          this.cropper &&  this.cropper.setAspectRatio( (this.cropObj.width / this.cropObj.height) )
    }

分别是当src传入的时候， 更改src， 当 cropObj 传入的时候， 更改剪切区域

• utils
  这里面主要包含了， bold base64, bolb_url， file转化的工具

• getBrowserInfo
  获取浏览器信息

• getImageData
  获取原图信息

• getData
  获取剪切区域图片信息

• beforeDestroy
  当关闭这个组件， 将组建销毁。

• replace
  里面有几个重要的点

      replace (url, onlyColorChanged) {
        this.cropper.reset()
        if (url && url.indexOf("http") == 0) {
          url = '//' + url.split("//")[1] + '?v=3'
        }
        if (onlyColorChanged) {
          this.cropper && this.cropper.replace(url, onlyColorChanged)
        } else {
          this.cropper && this.cropper.replace(url)
        }
      },
1.  this.cropper.reset() 重置
2. url = '//' + url.split("//")[1] + '?v=3'  有时候我们是请求https的， 但是当前域却在http环境， 因此去掉http|https， 使用//反而更好， 这样能防止跨域。
3. this.cropper.replace(url) 替换图片；