在Javascript中复制和裁剪图像

// 创建一个canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 加载图像
const image = new Image();
image.src = 'your-image-url';

// 设置图像加载完成后的回调函数
image.onload = () => {
  // 设置canvas的尺寸
  canvas.width = image.width;
  canvas.height = image.height;

  // 将图像绘制到canvas上
  ctx.drawImage(image, 0, 0);

  // 复制图像
  const copiedImage = new Image();
  copiedImage.src = canvas.toDataURL();

  // 裁剪图像
  const clipX = 50;
  const clipY = 50;
  const clipWidth = 100;
  const clipHeight = 100;

  const clippedCanvas = document.createElement('canvas');
  clippedCanvas.width = clipWidth;
  clippedCanvas.height = clipHeight;

  const clippedCtx = clippedCanvas.getContext('2d');
  clippedCtx.drawImage(canvas, -clipX, -clipY);

  // 将裁剪后的图像显示在页面上
  const clippedImage = new Image();
  clippedImage.src = clippedCanvas.toDataURL();
  document.body.appendChild(clippedImage);
};