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)
in the callback function returns: Blob {size: 64452, type: "image/png"}
But console.log(link.href)
returns nothing.
Am I not using .createObjectURL
correctly?
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
.