Comment enregistrer un canevas en tant qu'image en HTML5 ?

Enregistrement du canevas en tant qu'image à l'aide de Canvas.toDataURL()

En HTML5, vous pouvez créer et manipuler des images sur un élément canevas. Pour enregistrer le canevas en tant qu'image, vous pouvez utiliser la méthode canvas.toDataURL(). Cette méthode renvoie une représentation sous forme de chaîne codée en base64 du contenu du canevas dans le format d'image spécifié.

Cependant, vous pouvez rencontrer des problèmes si vous tentez d'enregistrer le canevas en tant qu'image à l'aide du code suivant :

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

Ce code échoue car il ne gère pas correctement la chaîne codée en base64. Pour enregistrer le canevas en tant qu'image, vous devez utiliser le code amélioré suivant :

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

Ici, la méthode replace() est utilisée pour convertir la chaîne codée en base64 en un flux d'octets, qui est compatible avec l'affectation window.location.href. Ce code enregistrera désormais avec succès le canevas en tant qu'image localement.

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!