Wie speichere ich eine Leinwand als Bild in HTML5?

Canvas als Bild mit Canvas.toDataURL() speichern

In HTML5 können Sie Bilder auf einem Canvas-Element erstellen und bearbeiten. Um die Leinwand als Bild zu speichern, können Sie die Methode „canvas.toDataURL()“ verwenden. Diese Methode gibt eine Base64-codierte Zeichenfolgendarstellung des Canvas-Inhalts im angegebenen Bildformat zurück.

Es können jedoch Probleme auftreten, wenn Sie versuchen, die Canvas mit dem folgenden Code als Bild zu speichern:

function putImage() {
  var canvas1 = document.getElementById("canvasSignature");
  if (canvas1.getContext) {
    var ctx = canvas1.getContext("2d");
    var myImage = canvas1.toDataURL("image/png");
  }
  var imageElement = document.getElementById("MyPix");
  imageElement.src = myImage;
}

Dieser Code schlägt fehl, weil er die Base64-codierte Zeichenfolge nicht richtig verarbeitet. Um die Leinwand als Bild zu speichern, müssen Sie den folgenden erweiterten Code verwenden:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image;

Hier wird die Methode replace() verwendet, um die Base64-codierte Zeichenfolge in einen Oktett-Stream zu konvertieren kompatibel mit der window.location.href-Zuweisung. Dieser Code speichert die Leinwand nun erfolgreich lokal als Bild.

Das obige ist der detaillierte Inhalt vonWie speichere ich eine Leinwand als Bild in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!