Heim > Artikel > Web-Frontend > Wie zeichne ich eine Daten-URL in den HTML-Canvas?
Wie zeichne ich eine Daten-URL in den HTML-Canvas?
- 王林nach vorne
- 2023-08-20 22:41:15687Durchsuche
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);
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>
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>
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!