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

最新推荐文章于 2024-07-24 23:00:08 发布

αβγδη

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量361

点赞数

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

本文链接：https://blog.csdn.net/qq_44732555/article/details/131609663

版权

使用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();
};