Ein Bild in JavaScript mit HTML Canvas zuschneiden
Um ein Bild in JavaScript zuzuschneiden, können wir das HTML-Element canvas verwenden. Das Element canvas ist in HTML5 verfügbar. Um das Bild auf der Leinwand anzuzeigen und zuzuschneiden, können wir die Funktion drawImage() verwenden. Die Funktion drawImage() benötigt mindestens drei Parameter und maximal neun Parameter.
Es gibt einen sogenannten Kontext, mit dessen Hilfe wir alles auf die Leinwand zeichnen können. Sie können es als Stift betrachten, mit dem Sie über die Leinwand zeichnen können. Der context stellt uns eine Methode namens drawImage() zur Verfügung, die den Inhalt auf den Bildschirm zeichnet. Sehen wir uns nun den schrittweisen Prozess zum Zuschneiden eines Bildes in JavaScript an.
Zuschneiden eines Bildes in JavaScript mit dem HTML5-Element canvas
Ein canvas in HTML 5 ist nichts anderes als ein leerer Bereich, in den wir alles zeichnen können, was wir wollen. Um eine Leinwand innerhalb des HTML-Codes hinzuzufügen, können wir ein canvas-Tag mit der ID canvas verwenden und für dieses Canvas-Element können wir auch seine Abmessungen angeben (in diesem Fall Breite: 1000px und Höhe: 500px) wie folgt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<script src="./script.js"></script>
</body>
</html>
Am Ende des body-Tags haben wir unsere Skriptdatei verlinkt, in der wir unseren JavaScript-Code schreiben werden.
In unserem JavaScript haben wir eine Funktion namens cropImg() erstellt. Innerhalb dieser Funktion erhalten wir das HTML-Element canvas mit document.getElementById() und speichern es in der Variablen canvas. Da wir auf dieser Leinwand ein Bild zeichnen möchten, das ein zweidimensionales Bild ist, erhalten wir zuerst den Kontext unseres Canvas-Elements mit der Funktion getContext() und übergeben als Argument an diese Funktion 2d. Und um diesen Kontext zu speichern, haben wir eine weitere Variable namens ctx erstellt.
Um mehr über die Funktion getContext() und ihre Eigenschaften zu erfahren, können Sie die MDN-Dokumentation besuchen und lesen. In diesem Stadium sieht unser Code so aus.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
}
}
Nachdem wir nun die Leinwand eingerichtet und den Kontext ctx bereit haben, können wir mit dem Zuschneiden und Zeichnen des Bildes beginnen.
Erstellen wir nun mit dem Konstruktor Image() ein Image-Tag und speichern es in einer Variablen image. Dann können wir mit der Eigenschaft src ein Bild mit dem image verknüpfen. Für dieses Tutorial nehmen wir die URL eines Bildes aus dem Internet (Unsplash.com) und fügen sie dann der source-Eigenschaft als unten gezeigte Zeichenkette hinzu.
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
Um das Bild zuzuschneiden und auf die Leinwand zu zeichnen, müssen wir sicherstellen, dass unser Bild bereits vollständig geladen ist. Dazu können wir die Funktion onload auf dem Bild verwenden. Der in diese Funktion geschriebene Code wird erst ausgeführt, nachdem das Bild vollständig geladen wurde.
Wie wir bereits in diesem Artikel gesehen haben, bietet uns der Kontext eine Funktion namens drawImage() zum Zeichnen von Bildern auf der Leinwand. Wir müssen dieser Funktion einige Eingaben übergeben, je nachdem, wie das endgültige Bild aussehen soll. Da wir ein Bild beschneiden möchten, wir nur einen bestimmten Teil dieses Bildes im Browser anzeigen und den Rest ausschließen möchten, müssen wir 9 Parameter an die Funktion drawImage() übergeben. Und die Parameter sind wie folgt.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Parameter:
image- Das Bild selbst, das wir zuschneiden und im Browser anzeigen möchten.sx(Quellbild x-Achse) - Dieser Parameter gibt an, von wo aus Sie das Bild von der x-Achse beschneiden oder beschneiden möchten.sy(Quellbild y-Achse) - Dieser Parameter gibt an, von wo aus Sie das Bild von der y-Achse beschneiden oder beschneiden möchten.sWidth- Die Breite des Bildes ab sx.sHeight- Die Höhe des Bildes ab sy.dx- Der Punkt, von dem aus mit dem Zeichnen des Bildes auf dem Bildschirm von der x-Achse aus begonnen wird.dy- Der Punkt, von dem aus mit dem Zeichnen des Bildes auf dem Bildschirm von der y-Achse aus begonnen wird.dWidth- Die Länge der Bilder, die auf dem Bildschirm angezeigt werden sollen.dHeight- Die Höhe der Bilder, die auf dem Bildschirm angezeigt werden sollen.
Das Bild unten zeigt die Parameter sx, sy und sWidth, die zum Zuschneiden oder Beschneiden des Bildes verwendet werden.
Nachdem wir das Bild beschnitten haben, um es im Browserfenster anzuzeigen, verwenden wir die Parameter dx, dy, dWidth und dHeight.
Jetzt können Sie dieser Funktion Parameter übergeben, je nachdem, wie und wo Sie das Bild anzeigen möchten. In diesem Beispiel haben wir image, 150, 200, 500, 300, 60,60, 500, 300 diese neun Werte an unsere Funktion drawImage() übergeben. Sie können diese Werte je nach gewünschter Ausgabe anpassen. Am Ende sieht Ihr Code ungefähr so aus. Vergessen Sie nicht, die Funktion cropImg() in Ihrem Code aufzurufen.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
image.onload = function() {
ctx.drawImage(image, 150, 200, 500, 300, 60, 60, 500, 300);
}
}
cropImg();
Dies ist der gesamte Vorgang, um ein Bild in JavaScript mit dem HTML 5-Canvas-Element zuzuschneiden. Dies ist der beliebteste und am weitesten verbreitete Ansatz, wenn es darum geht, ein Bild in JavaScript zuzuschneiden.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn