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. Hier erfahren Sie, wie Sie vorgehen Situation:

Problem und Lösung

Problem:

Das Folgende ist der Code zum Speichern des Leinwandbildes, funktioniert aber nicht 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:


  Save as Image

Lösung:

Der Schritt zum Konvertieren des Bildes in einen Binärstream fehlt im 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

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