Imagini pe canvas
Anterior, am discutat despre setarea imaginilor ca fundal pentru figuri, dar putem de asemenea să afișăm separat imaginile pe canvas. Pentru aceasta, se utilizează metoda drawImage() a contextului canvas. Această metodă are trei versiuni:
context.drawImage(image, x, y)Aici, parametrul image transmite imaginea care trebuie afișată, iar parametrii x și y - coordonatele colțului stânga sus al imaginii.
context.drawImage(image, x, y, width, height)Prin intermediul parametrilor adiționali width și height, se poate stabili respectiv lățimea și înălțimea imaginii afișate.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)Unde parametrii sx și sy reprezintă coordonatele pe imagine de la care începe decuparea, iar sWidth și sHeight reprezintă respectiv lățimea și înălțimea decupajului relativ la coordonatele sx și sy. Parametrii dx și dy indică coordonatele pe canvas unde să se afișeze imaginea decupată, iar dWidth și dHeight indică respectiv lățimea și înălțimea imaginii pe canvas.
De exemplu, aplicăm prima versiune a metodei pentru a afișa o imagine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<canvas id="canvas" width="450" height="300"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "fox2.png";
img.onload = ()=> context.drawImage(img, 0, 0);
</script>
</body>
</html>
Din nou, când afișăm o imagine, trebuie să fim siguri că imaginea a fost deja încărcată de browser și este gata de utilizare, așa că metoda de desenare a imaginii este plasată în handlerul de încărcare a imaginii img.onload.
A doua versiune a metodei drawImage() permite să se stabilească adițional lățimea și înălțimea imaginii afișate, ceea ce poate fi folosit pentru scalarea imaginii:
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "fox2.png";
img.onload = ()=> {
context.drawImage(img, 10, 10, 180, 150);
context.drawImage(img, 200, 10, 180, 150);
}
De asemenea, aplicăm a treia formă a metodei drawImage():
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "fox2.png";
img.onload = ()=> context.drawImage(img, 0, 100, 300, 200, 20, 30, 300, 200);
Capturarea imaginilor de pe alte elemente
Una dintre funcționalitățile remarcabile ale elementului canvas este capacitatea de a captura imaginea de pe un alt element, de exemplu, de pe un element video sau de pe un alt element canvas. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<video id="myVideo" src="fox.mp4" width="300" height="200" controls ></video>
<canvas id="canvas" width="300" height="200" style="background-color:#eee; border:1px solid #ccc;"></canvas>
<div><button id="snap">Faceți o fotografie</button></div>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const video = document.getElementById("myVideo");
document.getElementById("snap").onclick = () => context.drawImage(video, 0, 0, 300, 200);
</script>
</body>
</html>
Apăsând pe buton, canvas va obține cadru curent al videoului redat și îl va fixa ca imagine. În acest caz, în metoda drawImage, ca prim parametru se transmite elementul care este folosit ca sursă a imaginii.