使用toBlob下载画布图像

Question

我试图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()下载大小限制toBlob.

Answer 1

你的代码很好..只是在合适的时间使用它:)

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

Answer 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 });