Cropper.js用于设置头像裁剪器的常用配置

安装

npm install cropperjs

用法

new Cropper(element[, options])

• 元素

  • 类型：HTMLImageElement或HTMLCanvasElement
  • 用于裁剪的目标图像或画布元素。

• 选项（可选）

  • 类型：Object
  • 裁剪选项。查看可用选项。

例子

<!-- 需要用块元素容器包裹图像 -->
<div>
  <img id="image" src="picture.jpg">
</div>

/* 将图片元素设置为块级元素，并且设置最大宽度为100% */
img {
  display: block;
  max-width: 100%;
}

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
      viewMode: 1, // 视图模式，1：限制裁剪框不超过画布的大小
      dragMode: 'move', // 拖动模式
      aspectRatio: 1, // 裁剪框的固定纵横比
      autoCropArea: 1, // 自动裁剪区域，0~1自动裁剪区域大小（百分比）
      cropBoxMovable: false, // 裁剪框是否能移动
      cropBoxResizable: false, // 裁剪框是否缩放
      background: false, // 默认背景
      movable: true // 移动图片
    });

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数。

如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。