Bildgröße ändern mit HTML Canvas in JavaScript

Grafiken werden verwendet, um Aspekte von Bildern zu beschreiben, was ein wichtiger Bestandteil jeder Webanwendung ist. HTML bietet zwei Möglichkeiten, Grafiken zu erstellen. Das erste ist canvas, das andere SVG. Im heutigen Artikel lernen wir, wie man Grafiken erstellt, insbesondere wie man ein Bild in HTML mit Canvas und JavaScript zeichnet.

Ändern der Bildgröße mit canvas in HTML mit JavaScript

Canvas ist ein Standard-HTML-Element, das zum Zeichnen von Grafiken in Webanwendungen verwendet wird. Es ist nichts anderes als ein rechteckiger Bereich auf der Seite ohne Rahmen oder Inhalt. Benutzer können diesen rechteckigen Bereich zum Zeichnen von Grafiken verwenden.

Auf Leinwand gerenderte Grafiken unterscheiden sich von normalen HTML- und CSS-Stilen. Der gesamte Canvas mit allen darin enthaltenen Grafiken wird als einzelnes DOM-Element behandelt.

Methoden von canvas in HTML

1. getContext(): Dies ist eine eingebaute Methode von canvas, die den Zeichenkontext auf der Leinwand abhängig vom contextType zurückgibt. Wird der Kontextbezeichner nicht unterstützt oder ist er bereits konfiguriert, wird null zurückgegeben. Unterstützte Kontexttypen sind 2d, webgl, webgl2 und bitmaprenderer.
2. drawImage(): Dies ist eine eingebaute Methode von canvas, die hilft, das Bild auf verschiedene Weise auf die Leinwand zu zeichnen.

Syntax von drawImage()

context.drawImage(
    $image, $sx, $sy, $sWidth, $sHeight, $dx, $dy, $dWidth, $dHeight);

Parameter

• $image: Es ist ein obligatorischer Parameter, der die Bildquelle angibt, die in die Leinwand gezeichnet werden soll. Bildquelle kann alles sein wie CSSImageValue, HTMLImageElement, SVGImageElement usw.
• $sx: Dies ist ein optionaler Parameter, der das X oder die horizontale Koordinate des Quellbildes angibt. Es wird als Rechteck von der oberen linken Ecke aus gemessen, um in das Zielbild zu zeichnen.
• $sy: Dies ist ein optionaler Parameter, der die Y oder vertikale Koordinate des Quellbildes angibt. Es wird als Rechteck von der oberen linken Ecke aus gemessen, um in das Zielbild zu zeichnen.
• $sWidth: Dies ist ein optionaler Parameter, der die Breite des Quellbildes angibt. Es wird als Rechteck von der oberen linken Ecke aus gemessen, um in das Zielbild zu zeichnen.
• $sHeight: Dies ist ein optionaler Parameter, der die Höhe des Quellbildes angibt. Es wird als Rechteck von der oberen linken Ecke aus gemessen, um in das Zielbild zu zeichnen.
• $dx: Es ist ein obligatorischer Parameter, der das X oder die horizontale Koordinate des Zielbildes angibt. Es wird als Rechteck von der oberen linken Ecke aus gemessen, wo das Quellbild platziert wird.
• $dy: Es ist ein obligatorischer Parameter, der das Y oder die vertikale Koordinate des Zielbildes angibt. Es wird als Rechteck von der oberen linken Ecke aus gemessen, wo das Quellbild platziert wird.
• $dWidth: Dies ist ein optionaler Parameter, der die Breite des Zielbildes angibt. Es wird als Rechteck von der oberen linken Ecke gemessen. Wenn kein Wert angegeben wird, ist die Standardbreite die Breite des Quellbilds.
• $dHeight: Dies ist ein optionaler Parameter, der die Höhe des Zielbildes angibt. Es wird als Rechteck von der oberen linken Ecke gemessen. Wenn nicht angegeben, ist die Standardhöhe die Höhe des Quellbilds.

Schritte zum Ändern der Bildgröße mit JavaScript Canvas

Beispielcode:

<img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2" width="500" height="400">
<canvas id="canvas" width=1000></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src =
    'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2';

img.onload = function() {
  // set height proportional to destination image
  canvas.height = canvas.width * (img.height / img.width);
  // step 1 - resize to 75%
  const oc = document.createElement('canvas');
  const octx = oc.getContext('2d');
  // Set the width & height to 75% of image
  oc.width = img.width * 0.75;
  oc.height = img.height * 0.75;
  // step 2, resize to temporary size
  octx.drawImage(img, 0, 0, oc.width, oc.height);
  // step 3, resize to final size
  ctx.drawImage(
      oc, 0, 0, oc.width * 0.75, oc.height * 0.75, 0, 0, canvas.width,
      canvas.height);
}

Ausgabe: