Comment mettre des images dans HTML5 Canvas et les enregistrer sous forme d'images

Cet article présente principalement la méthode pour placer des images dans HTML5 Canvas et les enregistrer sous forme d'images. En particulier, enregistrer le contenu des images sous forme d'images est une fonction très pratique. Les amis dans le besoin peuvent s'y référer

Utilisez JavaScript pour copier l'image dans le canevas

Pour mettre l'image dans le canevas, nous utilisons la méthode drawImage de l'élément canevas :

 // Converts image to canvas; returns new canvas element

  function convertImageToCanvas(image) {

  var canvas = document.createElement("canvas");

  canvas.width = image.width;

  canvas.height = image.height;

  canvas.getContext("2d").drawImage(image, 0, 0);</p>
<p> return canvas;

  }

Ici 0, 0 point de coordonnées sur la toile, l'image sera copiée à cet endroit.

Utilisez JavaScript pour enregistrer le canevas au format image

Si votre travail sur le canevas est terminé, vous pouvez utiliser la méthode simple suivante pour convertir les données du canevas en image format :

// Converts canvas to an image

  function convertCanvasToImage(canvas) {

  var image = new Image();

  image.src = canvas.toDataURL("image/png");

  return image;

  }

Ce code peut comme par magie convertir une toile au format PNG !

Ces techniques de conversion entre images et toiles peuvent être plus simples que vous ne le pensez.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

HTML5 et JS implémentent une fonction locale de recadrage et de téléchargement d'images

Compression d'image via le développement mobile HTML5 fonction

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!