HTML5 és CSS3 programozás

Ügyesen

Kép kezelés, HTML5 Canvas Image

by · Published · Updated

Ebben a részben a képek manipulálására, megjelenítésére fogjuk használni a HTML5 canvas újításait.

Mielőtt belevágnánk, nézzük meg, hogy milyen módszereket választhatunk egy kép kirajzolására. Igazából a drawImage(img, x,y) paraméterezésének különböző módozatai miatt van lehetőség más és más kirajzolási módokat választanunk.

Az első esetben egyszerű dolgunk van, fogjuk a drawImage(img,x,y) megfelelő paraméterezését – ahol x,y a kép bal felső sarkának koordinátái.

Lássuk, hogy inicializálunk és töltünk egy képet ebben az esetben a rajzvászonra. Ez némi plusz magyarázatra szorul. Először is, létre kell hoznunk egy img – kép element-et (var img=new Image();). Majd az img.onload =function(){ ide jön a végrehajtás rész, esetünkben a drawImage(img,x,y)} inicializáljuk. Lássuk egy egyszerű példán, hogy ez hogyan is néz ki.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CANVAS image manipulating tutorial</title>
 <style>
  #rajzvaszon {
   border: 1px solid #3a3939; /*csak azért, hogy látszódjon, egy vékony keret*/
  }
 </style>
</head>

<body>
<canvas id="rajzvaszon" width="500" height="500"></canvas>
 <script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var img = new Image(); //kép element létrehozása
img.onload = function (){ //ide kerül a végrehajtás
    ctx.drawImage(img,0,0);  //kirajzoljuk a képet a 0,0 koordinátába
};

 img.src = 'HTML5Logo.png'; //kép forrása
 </script>

</body>
</html>

A példa itt elérhető, megtekinthető.

Most nézzük, ha több paramétert adunk a drawImage(img, x,y, rw,rh); – ebben az esetben is kirajzolja a képünket az x,y által meghatározott ponttól kezdve, de átméretezi rw (szélesség), és rh (magasság) méretűre.

Nézzük, a példánk hogyan módosul, ha csak 100×100-as méretben szeretném kirajzolni. Természetesen minden változatlan marad kivéve a DrawImage sora, az a következőképpen fog változni:

…
ctx.drawImage(img,0,0,100,100);  //kirajzoljuk a képet a 0,0 koordinátába 100x100-as méretben
…

Itt megtekinthető az eredmény.

Természetesen ez még nem minden, hiszen a képünkből ki is vághatunk darabokat. Ilyen esetben így paraméterezzük a drawImage(img,cx,cy,cw,ch,x,y,rw,rh); – 1. ábra Igen, ez már az OMG kategória, de azért érthető. Szóval nézzük is, kivágja a megkapott img-ből a cx,cy (képrészlet bal felső sarka),cw (szélesség),ch (magasság) által kijelölt képrészletet, majd kirajzolja az x,y koordinátára rw,rh méretben. Nem gondoltam volna, hogy le tudom írni, de talán érthető lett.

drawImage()

1. ábra

Lássuk hogy, hogyan változik meg a kódrészletünk:

…
ctx.drawImage(img,0,0,150,150,0,0,100,100);  //kirajzoljuk a kép darabját a 0,0 koordinátába a megadott rw,rh méretben
…

Itt megtekinthető a forrás és a végeredmény.

Most nézzük egy kis kép manipulációt. 🙂 Kezdjük valami egyszerűvel, talán egy szép árnyék effekt jó is lesz számunkra. A következő példában egy 3 pixel széles árnyékot teszünk a kirajzolt képünk köré, ezt a ctx.shadowOffsetX és ctx.shadowOffsetY paraméterek valamint a Blur beállításával tehetjük meg. A kódom a következő:

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8 />
  <title>CANVAS image manipulating tutorial</title>
  <style>
  #rajzvaszon {
   border: 1px solid #3a3939; /*csak azért, hogy látszódjon, egy vékony keret*/
  }
 </style>
</head>
<body>
<canvas id="rajzvaszon" width="300" height="300"></canvas>

<script>
var canvas = document.getElementById("rajzvaszon");
var ctx = canvas.getContext("2d"); //rajzvaszon inicializálása
var img = new Image(); //keptarolo letrehozasa
img.src = 'HTML5Logo.png'; // kep forrása

ctx.shadowOffsetX = 3; //árnyék beállítása
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2; //egy kis homályosítás
ctx.shadowColor = "black"; //árnyék színe

img.onload = function() { //kep kirajzolasa
ctx.drawImage(img, 10, 10);
}
</script>

</body>
</html>

A példa itt elérhető, megtekinthető.

Nézzünk egy kis pixel szintű képmanipulációt is. Ezt ne próbáljátok ki otthon. 🙂 Nézzük ehhez milyen függvények kellenek.

  • getImageData();
  • putImageData();

Használata:  imageData = ctx.getImageData(0, 0, width, height);  –  ahogy látható az imageData objektum (pixel tömb) tárolja az adott rajzvászon terület pixeleinek információit.
1 pixelhez egészen pontosan négy adatot tárolunk el. Az első elem a piros, a második a zöld, a harmadik a kék, a negyedig pedig az átlátszóságát. Ezzel gyakorlatilag leírjuk a pixel összes adatát, amit ezután könnyedén manipulálhatunk, majd a putImageData(); függvény segítségével ki is rajzolhatunk.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CANVAS image manipulating tutorial</title>
 <style>
  #rajzvaszon {
  border: 1px solid #3a3939; /*csak azért, hogy látszódjon, egy vékony keret*/
  }
</style>
</head>

<body>

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

<script>
function imageLoaded() {
canvas = document.getElementById("rajzvaszon");
ctx = canvas.getContext("2d");

width = parseInt(canvas.getAttribute("width")); //kiolvassuk a canvas méreteit és letároljuk
height = parseInt(canvas.getAttribute("height"));

ctx.drawImage(img, 0, 0);    // a bal felső sarokba kirajzoljuk a képet

imageData = ctx.getImageData(0, 0, width, height); //kinyerjük az összes pixelünk adatait

w2 = width / 2;

for (y = 0; y < height; y++) { //végig megyünk a kép pixelein
be = y * width * 4; // 4 / pixel
ki = be + w2 * 4
for (x = 0; x < w2; x++) {
r = imageData.data[be++] / 3; // kevesebb piros
g = imageData.data[be++] * 3; // több zöld
b = imageData.data[be++] /3 ; // kevesebb kék
a = imageData.data[be++];     // alpha ugyanaz

b = Math.min(255, b); // 0..255

imageData.data[ki++] = r;
imageData.data[ki++] = g;
imageData.data[ki++] = b;
imageData.data[ki++] = a;
}
}

// a megváltozott adatok kiiratása
ctx.putImageData(imageData, 0, 0);
}

img = new Image();
img.onload = imageLoaded;
img.src = "HTML5Logo.png";

</script>

</body>
</html>

Itt meg tudod nézi a zöld példánkat.

A következő részben az animációs lehetőségeket fogjuk megnézni. Addig is jó hétvégét mindenkinek!

Forrás:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images

Creative Commons Licenc
Kép kezelés, HTML5 Canvas Image a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

Tags:

You may also like...