支持移动设备的js图片剪裁插件

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) {}
});                  
                

方法

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

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