Comment dessiner une URL de données dans un canevas HTML ?-tutoriel HTML-php.cn

Comment dessiner une URL de données dans un canevas HTML ?

王林

Libérer： 2023-08-20 22:41:15

avant

692 Les gens l'ont consulté

如何将Data URL绘制到HTML画布中？

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!