Résolution des problèmes d'enregistrement d'image avec canvas.toDataURL()

Lorsque vous essayez d'utiliser canvas.toDataURL() pour enregistrer un canevas en tant qu'image , vous pourriez rencontrer des difficultés. Voici comment aborder la situation :

Problèmes et solutions

Problèmes :

Ce qui suit est le code pour enregistrer l'image du canevas mais il ne fonctionne pas :

// 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

Solution :

L'étape de conversion de l'image en flux binaire est manquante dans le code. Modifiez le code comme suit :

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

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

Le code peut enregistrer l'image localement en la convertissant en flux binaire et en la traitant comme un fichier.