js-cropper是一款支持移动设备的js图片剪裁插件。该js图片剪裁插件基于HTML5 canvas，支持移动设备，可以通过Base64编码导出剪裁后的图片。它的特点还有：

  • 支持Promise API。
  • 支持移动触摸事件。
  • 基于canvas技术，支持canvas的浏览器都可以使用该插件。
  • 通过Base64编码导出剪裁后的图片。
  • 可以通过json数据来获取图片的位置和大小。
  • 可以通过json数据来设置图片的位置和大小。
  • 可以通过URL来获取图片。

使用方法

在页面中引入cropper.js和cropper.css文件。

<link href="css/cropper.css" rel="stylesheet" type="text/css">
<script src="js/cropper.js"></script>
HTML结构

使用一个<div>元素作为容器。

<div id="crop"></div>
初始化插件

然后通过下面的方法来初始化该js图片剪裁插件。

const cropper = new Cropper();
cropper.render("#crop");
cropper.loadImage("/path/to/image.jpg").then(function (crop) {
    console.info("Image is ready to crop.");
});

配置参数

js-cropper图片剪裁插件的可用配置参数如下：

var cropper = new Cropper({
    width: 560,
    height: 340,
    onInit: function (crop) {},
    onChange: function(crop) {}
});
参数 类型 默认值 描述
width Number 560 要剪裁图片的宽度。
height Number 340 要剪裁图片的高度。
onInit(cropper) Function 插件初始化后的回调函数。
onChange(cropper) Function 图片位置移动或被缩放后的回调函数。

方法

js-cropper图片剪裁插件的可用方法有：

方法 描述
render(node) 渲染指定的节点，将它转换为图片剪裁。
loadImage(imageUrl) 从url中加载图片。
setWidth(width) 修改剪裁图片的宽度。
setHeight(height) 修改剪裁图片的高度。
setZoom(zoom) 设置缩放值，从0-1。
reset() 重置图片的位置和大小。
getCroppedImage() 产生并获取代表剪裁后图片的data URI数据。
getData() 获取图片信息。
setData() 设置图片信息。

setData(data)和getData()中的数据格式类似下面的样子。

var data = {
    origin: { x: 20, y: 40 }, 
    size: { width: 350, height: 350 }
}

js-cropper图片剪裁插件的github地址为：https://github.com/denis-kalinichenko/js-cropper