Bildgröße ändern mit HTML Canvas in JavaScript

Shraddha Paghdar 12 Oktober 2023
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

  • Rufen Sie den Kontext des Canvas ab.
  • Stellen Sie die Höhe des Canvas ein.
  • Erstellen Sie ein neues Canvas-Element, um die Größe zu ändern und den Kontext zu erhalten.
  • Legen Sie die Breite und Höhe des neu erstellten Canvas fest.
  • Zeichnen Sie das Bild auf einer neuen Leinwand.
  • Zeichnen Sie das Bild auf dem endgültigen Canvas mit dem neu erstellten 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:

Bildgröße in JS mit HTML-Canvas ändern

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn