Canvas-Ausgabe als Bild erfassen: Herausforderungen mit canvas.toDataURL() lösen

Beim Entwickeln von HTML5-Anwendungen den Inhalt eines Canvas erfassen denn ein Bild kann eine wesentliche Aufgabe sein. Die Methode „canvas.toDataURL()“ bietet die Möglichkeit, dies zu erreichen, aber manchmal kann ihre Implementierung auf Stolpersteine ​​stoßen.

Häufige Fallstricke

Ein häufiges Problem, das bei Canvas auftritt. toDataURL() besteht darin, dass das gespeicherte Bild möglicherweise nicht richtig angezeigt wird oder aufgrund einer unsachgemäßen Verwendung der Methode nicht gespeichert werden kann. Der folgende Codeauszug veranschaulicht ein häufiges Problem:

var canvas1 = document.getElementById("canvasSignature");        
var myImage = canvas1.toDataURL("image/png");      

In diesem Beispiel gibt der Aufruf von toDataURL() nicht den vollständigen MIME-Typ an, der „image/png“ sein sollte. Infolgedessen ist das generierte Bild möglicherweise beschädigt oder unbrauchbar.

Beheben des Problems

Um dieses Problem zu beheben und die korrekte Konvertierung der Leinwand in ein Bild sicherzustellen, Der vollständige MIME-Typ muss wie folgt bereitgestellt werden:

var canvas1 = document.getElementById("canvasSignature");        
var myImage = canvas1.toDataURL("image/png"); 

Wenn Sie das Bild außerdem lokal herunterladen möchten, können Sie die Eigenschaft window.location.href verwenden, um das Bild als Quelle für einen Download-Link festzulegen. Dies kann mit dem folgenden Code erreicht werden:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // Convert to Base64 and Replace MIME Type
window.location.href=image; // Set Image as Source for Download

Durch die Verwendung des vollständigen MIME-Typs und die entsprechende Einstellung der window.location.href-Eigenschaft können Sie den Inhalt einer Leinwand erfolgreich als Bild speichern und so die erfassten Inhalte nutzen Fügen Sie bei Bedarf ein Bild in Ihre Bewerbung ein.