Wymiarowanie obrazów

Nasz obrazek źródłowy “https://opta.com.pl/wp-content/uploads/2019/09/aniolek.jpg” ma wymiary:

  • szerokość (width) = 303px
  • wysokość (height) = 407px

aniołek

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("https://opta.com.pl/wp-content/uploads/2019/09/aniolek.jpg", 55, 17, 180, 150, dx, dy,
dw, dh)

.

aniołek

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("https://opta.com.pl/wp-content/uploads/2019/09/aniolek1.jpg", sx, sy, sw, sh, 55, 17, 180, 150)

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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 = "https://opta.com.pl/wp-content/uploads/2019/09/aniolek.jpg";
};	
            

w ten sposób mamy skompletowaną funkcję
drawImage("https://opta.com.pl/wp-content/uploads/2019/09/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ć pararametry
dx, dy, dw, dh

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *