使用cropper截取功能，并且设置比例

要使用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转换为图片进行展示或者其他处理。