使用drawImage 完成图片裁剪功能

使用drawImage方法可以很方便地实现图片的裁剪功能。下面是一个实现图片裁剪的示例代码：

const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'example.jpg';
image.onload = function() {
  // 绘制原始图片
  ctx.drawImage(image, 0, 0);
  // 裁剪图片并绘制
  const sx = 50; // 起点x坐标
  const sy = 50; // 起点y坐标
  const swidth = 100; // 裁剪宽度
  const sheight = 100; // 裁剪高度
  const dx = 0; // 绘制起点x坐标
  const dy = 0; // 绘制起点y坐标
  const dwidth = 100; // 绘制宽度
  const dheight = 100; // 绘制高度
  ctx.drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);
};

以上代码会在id为`my-canvas`的canvas元素上绘制一张名为`example.jpg`的图片，并在原始图片的基础上，裁剪出左上角坐标为(50,50)，宽度为100，高度为100的部分，再将其绘制到画布上左上角坐标为(0,0)，宽度为100，高度为100的位置。