Zielony Smok

HTML5 canvas – tutorial

Pobieranie danych obrazu

Mamy obraz, który możemy ukryć w elemencie img dodając atrybut style="display: none;". Nie czynimy tego tutaj, bo niektóre wtyczki WordPressa i niektóre przeglądarki uniemożliwiają ukrycie obrazka.

Pobieramy obrazek.

Wyświetlamy obrazek na płótnie.

Pobieramy dane obrazka przy użyciu funkcji getImageData().


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");
//położenie obrazka na canvas
var imageX = 10;
var imageY = 10;
//pobranie obrazka
var img = document.getElementById("aniolek");
//wymiary obrazka
var imageW = img.width;
var imageH = img.height;
//odrysowanie obrazka
ctx.drawImage(img, imageX,imageY);
//pobranie danych obrazka
var imageData = ctx.getImageData(imageX, imageY, imageW, imageH);
var data = imageData.data;
};