Wie zeichne ich eine Daten-URL in den HTML-Canvas?-HTML-Tutorial-php.cn

Wie zeichne ich eine Daten-URL in den HTML-Canvas?

王林

Freigeben： 2023-08-20 22:41:15

nach vorne

645 Leute haben es durchsucht

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

Daten-URLs sind eine Möglichkeit, Bilddateien im Textformat darzustellen. Dies erleichtert die Datenübertragung zwischen Anwendungen und ermöglicht die Speicherung von Bildern im Speicher, ohne sie auf die Festplatte zu schreiben. Das Zeichnen eines Bildes auf einer HTML-Leinwand mithilfe einer Daten-URL ist relativ einfach und kann mit nur wenigen Codezeilen durchgeführt werden.

Der Prozess umfasst das Erstellen eines Bildobjekts und das Festlegen seines Quellattributs auf die Daten-URL-Zeichenfolge, bevor es mit der Methode drawImage() auf die Leinwand gezeichnet wird. Dieser Artikel enthält schrittweise Anweisungen zum Zeichnen eines Bilds aus der Daten-URL auf eine HTML-Leinwand.

DrawImage() in Canvas verwenden

Verwenden Sie die Methode drawImage() von HTML5, um Leinwandbilder oder Videos anzuzeigen. Mit dieser Funktion können Sie das gesamte Bild oder nur einen Teil davon anzeigen. Doch bevor das Bild weiter auf die Leinwand geladen werden kann, muss es zunächst geladen werden.

Syntax

Das Folgende ist die Syntax von drawImage()-

context.drawImage(img,x,y);

Nach dem Login kopieren

Betrachten Sie das folgende Beispiel, um besser zu verstehen, wie ein Bild von einer Daten-URL in eine HTML-Zeichenfläche gezeichnet wird

Beispiel

Im folgenden Beispiel führen wir ein Skript aus, um ein Bild von einer URL auf die Leinwand zu zeichnen.

<!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>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die das auf der Leinwand gezeichnete Bild enthält, das von der vom Skript bereitgestellten URL erhalten wurde.

Beispiel

Unten sehen Sie ein weiteres Beispiel, in dem wir ein Teilbild einer Quell-URL auf einer Leinwand anzeigen

<!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>

Nach dem Login kopieren

Beim Ausführen des obigen Skripts öffnet sich das Ausgabefenster und zeigt das Bild auf der Webseite an, die auf der von der URL erhaltenen Leinwand gezeichnet wurde.

Das obige ist der detaillierte Inhalt vonWie zeichne ich eine Daten-URL in den HTML-Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!