Wymiarowanie obrazów
Nasz obrazek źródłowy “images/aniolek.jpg” ma wymiary:
- szerokość (width) = 303px
- wysokość (height) = 407px
Funkcja drawImage(obrazek, sx, sy, sw, sh, dx, dy, dw, dh) służy do pobierania fragmentu obrazka źródłowego i wyświetlenia pobranego fragmentu w znaczniku <canvas>.
Parametry z przedrostkiem ‘s’ są danymi pobieranego wycinka.
Parametry z przedrostkiem ‘d’ są danymi obrazka wyświetlanego.
Z obrazka pobieramy wycinek o współrzędnych (sx=55, sy=17, sw=180, sh=150), czyli mamy określone parametry metody drawImage("images/aniolek.jpg", 55, 17, 180, 150, dx, dy, dw, dh).
a następnie wyświetlamy wycinek na <canvas>. Parametry wyświetlenia to: (dx=55, dy=17, dw=180, dh=150), czyli mamy określone parametry funkcji drawImage("images/aniolek.jpg", sx, sy, sw, sh, 55, 17, 180, 150)
Listing
window.onload = function() {
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var img = new Image();
img.onload = function() {
//ctx.drawImage(img,0,0,303,417,0,0,303,417);//cały
//ctx.drawImage(img, 0, 0, 303, 208, 0, 0, 303, 208);//gorna polowa
//ctx.drawImage(img, 0, 208, 303, 208, 0, 208, 303, 208);//dolna połowa
ctx.drawImage(img, 55, 17, 180, 150, 55, 17, 180, 150);//wycinek obrazka
}
img.src = "images/aniolek.jpg";
};
W ten sposób mamy skompletowaną funkcjędrawImage("images/aniolek.jpg", 55, 17, 180, 150, 55, 17, 180, 150)
Obrazek został wyświetlony na <canvas> dokładnie w tym samym miejscu co na obrazku wyjściowym. Obrazek pobrany i wyświetlony są tej samej wielkości.
Oczywiście nic nie stoi na przeszkodzie, aby obrazek wyświetlić w innym miejscu lub w innych rozmiarach. Wystarczy zmienić parametry dx, dy, dw, dh.