使用 toBlob 下载画布图像

Posted 2023-03-14

【中文标题】使用 toBlob 下载画布图像

【英文标题】：Downloading canvas image using toBlob

【发布时间】：2017-11-17 22:45:14

【问题描述】：

我正在尝试在以下代码中使用toBlob 单击按钮下载一个大画布图像（高度和宽度为数千像素），这似乎不起作用：

document.getElementById("download_button").onclick = function() 

  var link = document.createElement("a");
  link.download = "image.png";

  canvas.toBlob(function(blob)
    link.href = URL.createObjectURL(blob);
    console.log(blob);
  ,'image/png');

  console.log(link.href);
  link.click();

console.log(blob)在回调函数中返回：Blob size: 64452, type: "image/png"

但是console.log(link.href) 什么也没返回。

我没有正确使用.createObjectURL吗？

我曾经使用toDataURL，但它在某个画布尺寸以上停止工作。而这个帖子canvas.toDataURL() download size limit建议试试toBlob。

【参考方案1】：

你的代码很好..只要在正确的时间使用它:)

 canvas.toBlob(function(blob)
    link.href = URL.createObjectURL(blob);
    console.log(blob);
    console.log(link.href); // this line should be here
  ,'image/png');

【讨论】：

好的，谢谢！它与回调函数中的console.log(link.href); 和link.click(); 一起正常工作。

@ymz 为什么会这样？我认为只有在 .href 是添加到链接元素的自定义属性但它不是的情况下才会出现这种情况，但是链接元素也在事件函数范围内定义，因此也应该可以访问，或者是因为它嵌套在另一个功能？

@ymz 我只是尝试了一些东西来尝试测试它，这就是我得到的：var link = document.createElement("a"); link.download = "image.png"; function test() link.href = "#Test"; console.log(link.href); result: "image.png"

此外，我的第一个想法是 link.href 不应该在该函数之外访问，或者至少，奇怪的是，基于上述行为返回“image.png”，但在外部链接.href函数作用域给出一个空字符串。

【参考方案2】：

我的解决方法：

async function getImage(
  canvas,
  width,
  height,
  mime = 'image/jpeg',
  quality = 0.8,
) 
  return new Promise(resolve => 
    const tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = width;
    tmpCanvas.height = height;

    const ctx = tmpCanvas.getContext('2d');
    ctx.drawImage(
      canvas,
      0,
      0,
      canvas.width,
      canvas.height,
      0,
      0,
      width,
      height,
    );

    tmpCanvas.toBlob(resolve, mime, quality);
  );


const photo = await getImage( canvas, width: 500, height: 500 );