使用html2Canvas下载图片，由于页面尺寸与下载的尺寸不一致导致下载的图片问题

αβγδη

于 2023-07-08 11:16:52 发布

阅读量536

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_44732555/article/details/131609663

版权

文章探讨了在使用html2Canvas将HTML元素转换为图片时，由于图片尺寸过大引起的模糊问题。通过创建img元素，设置crossOrigin属性，然后在onload事件中利用canvas进行绘制并转换为base64格式来下载图片。然而，大尺寸图片可能会导致质量损失和模糊。解决方案可能涉及调整canvas大小、增加渲染分辨率或者采用其他图像处理技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用html2Canvas下载图片，由于尺寸过大模糊的问题

function download() {
  const image = document.createElement('img');
  // 添加时间戳，防止浏览器缓存图片
  image.src = referenceModalImg.value;
  image.setAttribute('crossOrigin', 'Anonymous');
  image.onload = () => {
    const link = document.createElement('a');
    link.setAttribute('download', schoolMapName.value);
    link.href = getImageBase64(image);
    link.click();
  };
}
// canvas 转为img
export const getImageBase64 = image => {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, image.width, image.height);
  ctx.drawImage(image, 0, 0, image.width, image.height);
  // 获取图片后缀名
  // 某些图片 url 可能没有后缀名，默认是 png
  return canvas.toDataURL();
};