Leinwand Bild Download mit toBlob

Question

Ich versuche, eine große Leinwand Bild (mehrere tausend Pixel Höhe und Breite) auf dem Klick auf eine Schaltfläche toBlob im folgenden Code herunterzuladen, die nicht zu funktionieren scheinen:

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 der Callback-Funktion zurückgibt: Blob {size: 64452, type: "image/png"}

Aber console.log(link.href) nichts zurückkehrt.

Ich verwende .createObjectURL nicht richtig?

Ich arbeitete mit toDataURL, aber es funktioniert nicht mehr über eine bestimmte Leinwandgröße. Und dieser Beitrag canvas.toDataURL() download size limit vorgeschlagen, versuchen Sie toBlob.

Answer 1

Der Code ist in Ordnung .. verwenden sie nur zur richtigen Zeit :)

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