使用toBlob下载画布图像 [英] Downloading canvas image using toBlob

问题描述

我试图在下面的代码中使用 toBlob 点击按钮下载一个大的画布图像（几千像素的高度和宽度），这不是似乎工作：

I am attempting to download a large canvas image (several thousand pixels height and width) on the click of a button using toBlob in the following code, which doesn't seem to work:

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 。

I used to work with toDataURL, but it stopped working above a certain canvas size. And this post canvas.toDataURL() download size limit suggested to try toBlob.

推荐答案

您的代码很好..只需在合适的时间使用它： ）

Your code is fine.. just use it at the right time :)

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

这篇关于使用toBlob下载画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！