Skip to main content

图片裁剪

主要思路是基于 canvas

  1. 生成 image 对象
  2. canvas 加载 image 对象
  3. 设置蒙层，区分选中的区域
const drawSelect = (x: number, y: number, w: number, h: number) => {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // 绘制蒙层
  drawCover();
  ctx.save();
  ctx.clearRect(x, y, w, h);
  // 画选中框
  ctx.strokeStyle = "#5696f8";
  ctx.strokeRect(x, y, w, h);
  // 恢复操作之前的画布上下文，比如坐标原点、方向等
  ctx.restore();
  drawImage();
};
  1. 针对选中区域，实现拖动、调整大小、旋转等功能
  2. 导出选中区域 toDateUrl/toBlob

其他​

  • 新建一个 canvas，辅助预览