Maison > Article > interface Web > Comment dessiner une URL de données dans un canevas HTML ?
Comment dessiner une URL de données dans un canevas HTML ?
- 王林avant
- 2023-08-20 22:41:15648parcourir
Les URL de données sont un moyen de représenter des fichiers image au format texte. Cela facilite le transfert de données entre les applications et permet de stocker les images en mémoire sans les écrire sur le disque. Dessiner une image sur un canevas HTML à l’aide d’une URL de données est relativement simple et peut être réalisé avec seulement quelques lignes de code.
Le processus consiste à créer un objet Image et à définir son attribut source sur la chaîne URL de données avant de le dessiner sur le canevas à l'aide de la méthode drawImage(). Cet article fournira des instructions étape par étape sur la façon de dessiner une image à partir d'une URL de données. sur un canevas HTML.
Utilisation de drawImage() dans Canvas
Utilisez la méthode drawImage() de HTML5 pour afficher des images ou des vidéos sur toile. Vous pouvez utiliser cette fonctionnalité pour afficher l’intégralité de l’image ou seulement une partie de celle-ci. Mais avant que l’image puisse être chargée davantage sur le canevas, elle doit d’abord être chargée.
Syntaxe
Ce qui suit est la syntaxe de drawImage()-
context.drawImage(img,x,y);
Considérez l'exemple suivant pour mieux comprendre comment dessiner une image à partir d'une URL de données vers un canevas HTML
Exemple
Dans l'exemple ci-dessous, nous exécutons un script pour dessiner une image à partir d'une URL vers le canevas.
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial"></canvas>
<script>
var c = document.getElementById("tutorial");
var ctx = c.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = 'https://www.tutorialspoint.com/images/logo.png';
</script>
</body>
</html>
Lorsque le script est exécuté, il générera une sortie contenant l'image dessinée sur le canevas obtenue à partir de l'URL fournie par le script.
Exemple
Ci-dessous, un autre exemple où nous affichons une image partielle d'une URL source sur un canevas
<!DOCTYPE html>
<html>
<body>
<style>
canvas{
border : 2px solid #82E0AA ;
}
</style>
<canvas id='tutorial' width=500 height=500></canvas>
<script>
var canvas = document.getElementById('tutorial');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = () => {
context.imageSmoothingEnabled = false;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 30, 40, 50, 50, 150, 220, 200, 200);
};
image.src = 'https://www.tutorialspoint.com/images/logo.png';
</script>
</body>
</html>
Lors de l'exécution du script ci-dessus, la fenêtre de sortie apparaîtra, affichant l'image sur la page Web dessinée sur le canevas obtenu à partir de l'URL.
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!