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
