JavaScript Canvas 图片裁剪：鼠标拖放实现

你可以使用以下步骤来实现用鼠标拖放进行图片裁剪：

创建一个 canvas 元素，并获取其上下文对象：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

加载图片并在 canvas 上绘制它：

var image = new Image();
image.src = 'your_image_url';
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

创建变量来保存裁剪区域的起始点和尺寸：

var startX, startY, width, height;

创建一个 mousedown 事件监听器来记录鼠标按下时的起始点：

canvas.addEventListener('mousedown', function(e) {
  startX = e.pageX - canvas.offsetLeft;
  startY = e.pageY - canvas.offsetTop;
});

创建一个 mousemove 事件监听器来实时更新裁剪区域的尺寸：

canvas.addEventListener('mousemove', function(e) {
  if (startX != null && startY != null) {
    width = e.pageX - canvas.offsetLeft - startX;
    height = e.pageY - canvas.offsetTop - startY;
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重新绘制原始图片
    ctx.drawImage(image, 0, 0);
    // 绘制裁剪区域的矩形边框
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.strokeRect(startX, startY, width, height);
  }
});

创建一个 mouseup 事件监听器来获取最终裁剪区域的尺寸，并执行裁剪操作：

canvas.addEventListener('mouseup', function() {
  // 执行裁剪操作
  var croppedImage = ctx.getImageData(startX, startY, width, height);
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 调整 canvas 大小以适应裁剪后的图像
  canvas.width = width;
  canvas.height = height;
  // 在 canvas 上绘制裁剪后的图像
  ctx.putImageData(croppedImage, 0, 0);
});

这样就可以实现用鼠标拖放进行图片裁剪了。记得在 HTML 中添加一个 canvas 元素，并给它一个 id，例如：

<canvas id='canvas'></canvas>