Pourquoi mon canvas.toDataURL() n'enregistre-t-il pas mon image ?

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 question. situation :

Problèmes et solutions

Problème :

Ce qui suit est utilisé pour enregistrer le tableau Codez en image en tissu mais cela 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:

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

Solution :

L'étape pour convertir l'image en flux binaire est manquante dans le code. Modifiez le code en :

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!