怎么用 canvas 绘制页面中 img 标签（缩放后）的图片内容？

站长

2024年06月30日 08:54 · 阅读数 15

注意图片是使用 object-fit: cover 这种方式缩放过的我试过下面的常规方法，但是得到的图片不太一样，因为浏览器缩放过的原因：

export const ImageToCanvas = (image: HTMLImageElement) => {
  const canvas = document.createElement('canvas');

  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext('2d')?.drawImage(image, 0, 0);

  return canvas;
};

export const canvasToImage = (canvas: HTMLCanvasElement) => {
  const image = new Image();
  image.src = canvas.toDataURL('image/png');

  return image;
};

export const downloadImage = (image: HTMLImageElement, name: string) => {
  const link = document.createElement('a');

  link.download = name;
  link.href = image.src;
  link.click();
};

怎么用 canvas 绘制页面中 img 标签（缩放后）的图片内容？

1个回答

test

2024-06-30

export const ImageToCanvas = (image: HTMLImageElement) => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  canvas.width = image.width;
  canvas.height = image.height;

  // 计算缩放比例和剪裁位置
  const imgRatio = image.naturalWidth / image.naturalHeight;
  const canvasRatio = canvas.width / canvas.height;
  let sx, sy, sw, sh;
  if (imgRatio > canvasRatio) {
    sw = image.naturalHeight * canvasRatio;
    sh = image.naturalHeight;
    sx = (image.naturalWidth - sw) / 2;
    sy = 0;
  } else {
    sw = image.naturalWidth;
    sh = image.naturalWidth / canvasRatio;
    sx = 0;
    sy = (image.naturalHeight - sh) / 2;
  }

  context?.drawImage(image, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);

  return canvas;
};

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容