logo

Jak přidat obrázky na HTML Canvas

Při práci s HTML Canvasem je někdy žádoucí přidat obrázky. V tomto článku se podíváme na to, jak můžete snadno přidat obrázky (např. .jpeg a .png) na své HTML plátno.

Pokud s HTML Canvas teprve začínáte, začněte s naší příručkou „Začínáme s HTML Canvasem“.

Jak přidat obrázky do HTML Canvas

Přidávání obrázků na plátno HTML závisí na konstruktoru Image(), který nám umožňuje pracovat s obrázky v Javascriptu. Pro tento návod budu používat obrázek z Pexels od figenkokol.

Chcete-li začít, vytvořte prvek plátna HTML jako obvykle:

<canvas id="canvas" width="300" height="300"></canvas>

Nyní se podíváme na HTML. Nejprve vytvoříme new Image() a poté nastavte jeho adresu URL (tj. src) na obrázek, který chceme zobrazit:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// Create our image
let newImage = new Image();
newImage.src = 'https://fjolt.com/images/misc/202203281.png'

// When it loads
newImage.onload = () => {
    // Draw the image onto the context
    ctx.drawImage(newImage, 0, 0, 250, 208);
}

Když se obrázek načte (newImage.onload ), poté obrázek nakreslíme na naše plátno. K tomu používáme ctx.drawImage() . Syntaxe je uvedena níže. 

ctx.drawImage(image, x, y, width, height)

Pokud je deklarováno takto, ctx.drawImage() má pouze 5 argumentů:

  • image - obrázek, který chceme použít, vygenerovaný z našeho new Image() konstruktor.
  • x – pozice x na plátně pro levý horní roh obrázku.
  • y - poloha y na plátně pro levý horní roh obrázku.
  • width - šířka obrázku. Pokud ponecháte prázdné, použije se původní šířka obrázku.
  • height - výška obrázku. Pokud ponecháte prázdné, použije se původní výška obrázku.

Výše uvedený kód vytvoří následující plátno:

Nyní jsme úspěšně nakreslili obrázek na prvek plátna HTML pouze pomocí JavaScriptu.

Oříznutí obrázků v HTML Canvas

Pomocí ctx.drawImage můžeme také oříznout obrázky. Tato verze funkce přijímá mírně odlišnou syntaxi, ale umožňuje nám oříznout obrázek, jak uznáme za vhodné.

ctx.drawImage(image, cx, cy, sw, sh, x, y, width, height)
Pokud je deklarováno takto, ctx.drawImage() má 9 argumentů:

  • image - obrázek, který chceme použít, vygenerovaný z našeho new Image() konstruktor.
  • cx - o tuto vzdálenost od levého horního rohu chceme obrázek oříznout. Pokud je tedy 50, bude obrázek oříznut o 50 pixelů z levé strany.
  • cy - o tuto vzdálenost od horního okraje chceme obrázek oříznout. Pokud je tedy 50, bude obrázek oříznut o 50 pixelů od horní strany.
  • sw - takto velký chceme mít obrázek z bodu cx. Pokud je tedy 100, obrázek bude pokračovat 100 pixelů od cx a poté bude v tomto bodě oříznuta.
  • sh - takto velký chceme mít obraz z bodu ch. Pokud je tedy 100, obrázek bude pokračovat 100 pixelů od ch a poté bude v tomto bodě oříznuta.
  • x – pozice x na plátně pro levý horní roh obrázku.
  • y - poloha y na plátně pro levý horní roh obrázku.
  • width - šířka obrázku. Pokud ponecháte prázdné, použije se původní šířka obrázku.
  • height - výška obrázku. Pokud ponecháte prázdné, použije se původní výška obrázku.

Pokud dáváte přednost vizuálu, oříznutí pomocí této metody funguje následovně:

Jak funguje oříznutí s HTML Canvas

Podívejme se na příklad. Ve skutečnosti se nic nemění, kromě syntaxe ctx.drawImage . 

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// Create our image
let newImage = new Image();
newImage.src = 'https://fjolt.com/images/misc/202203281.png'

// When it loads
newImage.onload = () => {
    // Draw the image onto the context with cropping
    ctx2.drawImage(newImage, 20, 20, 500, 500, 0, 0, 250, 208);
}

Poznámka: efekt oříznutí použije původní velikost obrázku - takže pokud je váš obrázek široký 1000 pixelů, jako je tento, musíme jej oříznout podle těchto rozměrů. Potom můžeme použít x, y, šířku, výšku k nakreslení obrázku na libovolnou velikost.

Výše uvedené vytvoří následující plátno:


No