要使用cropper实现截图功能并设置比例，你可以使用cropperjs这个库。以下是一个简单的例子，演示如何使用cropperjs设置截图比例。
首先，确保你已经在你的项目中引入了cropperjs。你可以通过npm或者直接在HTML文件中通过script标签引入。
通过npm安装：
npm install cropperjs在HTML文件中引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css"/>HTML部分：
<img id="image" src="path/to/your/image.jpg">
<button id="crop">Crop</button>JavaScript部分：
var image = document.getElementById('image');
var cropper;
// 初始化cropper
cropper = new Cropper(image, {
aspectRatio: 16 / 9, // 设置截图比例为16:9
crop: function(e) {
// 当截图框改变时执行的回调
console.log(e.detail.width);
console.log(e.detail.height);
console.log(e.detail.x);
console.log(e.detail.y);
console.log(e.detail.rotate);
console.log(e.detail.scaleX);
console.log(e.detail.scaleY);
}
});
// 点击按钮后执行截图
document.getElementById('crop').addEventListener('click', function() {
var croppedCanvas;
// 获取裁剪后的canvas
croppedCanvas = cropper.getCroppedCanvas({
width: 300, // 输出图片宽度
height: 150, // 输出图片高度
});
// 可以将canvas转换为图片或者其他操作
var img = croppedCanvas.toDataURL('image/jpeg');
// 比如展示在另一个img标签中
document.getElementById('result').src = img;
});在这个例子中，我们首先通过new Cropper()创建一个cropper实例，并通过aspectRatio选项设置了截图的比例为16:9。当用户点击按钮时，通过cropper.getCroppedCanvas()方法获取裁剪后的canvas，然后可以将canvas转换为图片进行展示或者其他处理。