cropper固定裁剪区域
时间: 2024-01-09 07:20:25 浏览: 23
为了固定裁剪区域,可以使用cropper.js中的aspectRatio选项。该选项允许您设置裁剪框的宽高比,从而固定裁剪区域。例如,如果您想要一个1:1的裁剪框,则可以将aspectRatio选项设置为1。如果您想要一个16:9的裁剪框,则可以将aspectRatio选项设置为16/9=1.7777778。
以下是一个使用aspectRatio选项的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Cropper.js - Fixed Aspect Ratio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" integrity="sha512-+JZzvJQJ6JZJ7JZJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJw==" crossorigin="anonymous" />
</head>
<body>
<div>
<img id="image" src="image.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js" integrity="sha512-+JZzvJQJ6JZJ7JZJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJzJw==" crossorigin="anonymous"></script>
<script>
var image = document.getElementById('image');
var cropper = new Cropper(image, {
aspectRatio: 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);
}
});
</script>
</body>
</html>
```
在上面的示例中,我们将aspectRatio选项设置为1,这意味着裁剪框的宽高比为1:1。这将固定裁剪区域,并且无论用户调整裁剪框的大小,它始终保持1:1的宽高比。