Comment mettre des images dans HTML5 Canvas et les enregistrer en tant que conseils du didacticiel pictures_html5

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 canvas :

Copier le code

Codez comme suit :

// Convertit l'image en canevas ; renvoie un nouvel élément de canevas
fonction convertImageToCanvas(image) {
var toile = document.createElement("canvas");
toile.width = image.width;
toile.hauteur = image.hauteur;
canvas.getContext("2d").drawImage(image, 0, 0);

retourner la toile ;
>

Le paramètre 0, 0 ici est le point de coordonnées sur le canevas, et l'image sera copiée à cet endroit.

Utilisez JavaScript pour enregistrer le canevas au format image

Si votre travail sur la toile est terminé, vous pouvez utiliser la méthode simple suivante pour convertir les données de la toile au format image :

Copier le code

Le code est le suivant :

// Convertit le canevas en image
fonction convertCanvasToImage(canvas) {
var image = nouvelle Image();
image.src = canvas.toDataURL("image/png");
renvoyer l'image ;
>

Ce code peut comme par magie convertir le canevas au format PNG !

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