1.引入cropper.js插件的CSS和JS文件
<link rel="stylesheet" href="cropper.css"><script src="cropper.js"></script>
<script src="cropper.js"></script>
2.在HTML中添加一个图片元素和一个裁剪框元素
<img id="image" src="image.jpg">
<div id="cropper"></div>
3.初始化cropper对象
var cropper = new Cropper(document.getElementById('image'),
{
aspectRatio: 16 / 9,
viewMode: 1,
crop: function(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);
}
}
);
4.可选:设置cropper对象的属性
var cropper = new Cropper();
cropper.setData({
x: 100,
y: 100,
width: 200,
height: 200,
rotate: 45,
scaleX: 1,
scaleY: 1
});
5.可选:获取裁剪后的图片数据
var cropper = new Crooper()
cropper.getCroppedCanvas().toDataURL();
6.可选:销毁cropper对象
var cropper = new Crooper()
cropper.destroy();
初始化cropper对象时,可以设置以下属性值:
aspectRatio: 裁剪框的宽高比ÿ