图片裁剪-cropperjs详解

图片裁剪cropperjs

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

1. 安装

cnpm install cropperjs

2. 使用

//<!-- Wrap the image or canvas element with a block element (container) -->
//图片必须被块级元素所包裹
<div>
  <img id="image" src="picture.jpg">
</div>

/* Ensure the size of the image fit the container perfectly */
//设置img为块级元素  img是行内块元素
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}

//引入css、js样式
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
//获取dom元素  在vant组件中通过给img绑定ref属性获取dom元素
//const image = this.$refs.file;
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);
     viewMode: 1, //定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以延伸到画布外部，而值为1、2或3将限制裁剪框的大小为画布的大小。viewMode为2或3会将画布限制为容器。请注意，如果画布和容器的比例相同，则2和3之间没有差别。
      dragMode: 'move', //定义的拖动模式裁剪器.canvas和容器一样，2和3没有区别。move:移动画布 crop:创建新的裁剪框（默认） none:什么也不做
      aspectRatio: 3 / 2,//定义裁剪框的固定纵横比。默认情况下，裁剪框为自由比率。
      autoCropArea: 1,//定义0到1之间的fA编号。定义自动裁剪区域大小（百分比）。默认0.8
      cropBoxMovable: false,//允许通过拖动移动裁剪框。默认true
      cropBoxResizable: false,//以通过拖动来调整裁剪框的大小 默认true
      background: false,//显示容器的网格背景
      movable: true //移动图像
  },
});

3. 调用接口发送请求

一般后台接口需要传递form-data对象

我们需要将图片转成multipart/form-data格式数据

getCroppedCanvas([options])

获取裁剪后的图片，这种方法适用于移动端项目

不只适与用于vue项目，这是原生js代码可以适用于任何项目

cropper.getCroppedCanvas().toBlob((blob) => {
  const formData = new FormData();

  // Pass the image file name as the third parameter if necessary.
    //如果需要，将图像文件名作为第三个参数传递。
  formData.append('croppedImage', blob/*, 'example.png' */);

  //发起请求
  $.ajax('/path/to/upload', {
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success() {
      console.log('Upload success');
    },
    error() {
      console.log('Upload error');
    },
  });
}/*, 'image/png' */);

getData([rounded])

获取裁剪后的图片，这种方法适用于PC端项目

使用

<span @click="confirm">完成</span>

confirm () {
    console.log(this.cropper.getData())
}