Warum speichert mein canvas.toDataURL() mein Bild nicht?

Beheben von Problemen beim Speichern von Bildern mit canvas.toDataURL()

Beim Versuch, canvas.toDataURL() zum Speichern einer Leinwand als Bild zu verwenden , können Sie auf Schwierigkeiten stoßen. So gehen Sie die Situation an:

Probleme und Lösungen

Probleme:

Das Folgende ist der Code zum Speichern des Leinwandbildes, aber er funktioniert nicht:

// Canvas named "canvasSignature"

JavaScript:

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;
}

HTML5:

<div id="createPNGButton">
  <button onclick="putImage()">Save as Image</button>
</div>

Lösung:

Der Schritt zum Konvertieren des Bildes in einen Binärstream fehlt in der Code. Ändern Sie den Code wie folgt:

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

window.location.href = image; // Save locally

Der Code kann das Bild lokal speichern, indem er es in einen Binärstream konvertiert und als Datei behandelt.

Das obige ist der detaillierte Inhalt vonWarum speichert mein canvas.toDataURL() mein Bild nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!