cropper.js插件怎么使用
时间: 2024-01-03 20:43:51 浏览: 39
1. 引入cropper.js插件的CSS和JS文件
```
<link rel="stylesheet" href="cropper.css">
<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对象的属性
```
cropper.setData({
x: 100,
y: 100,
width: 200,
height: 200,
rotate: 45,
scaleX: 1,
scaleY: 1
});
```
5. 可选:获取裁剪后的图片数据
```
cropper.getCroppedCanvas().toDataURL();
```
6. 可选:销毁cropper对象
```
cropper.destroy();
```