Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Манипулиране на изображения и пиксели

Елементът <canvas> се използва в HTML5 за динамично представяне на двуизмерни фигури и растерни изображения. Този елемент се състои от област, която е със зададена височина и ширина чрез HTML код. Тази област е достъпна за програмиране с JavaScript чрез пълен комплект от изобразителни функции, с които могат динамично да се генерират изображения, графики, анимации и игри.

Метод drawImage

Методът drawImage се използва когато се представя обект или част от него в полето оградено от елемента <canvas>. С този метод може и да се увеличава или намалява размера на обекта. В метода могат да се използват до девет параметъра в зависимост от това, какво е необходимо да се направи с обекта. Обекта може да бъде изображение, видео или някакъв друг елемент.

Методът се записва като ctx.drawImage(обект,x1,y1,w1,h2,x2,y2, w2,h2), където

обект - обекта, който ще се използва в представянето. Стойностите са изображение или видео, които се задават с променлива var. x1, y1 - координати в пиксели на началната точка на отрязъка от изображението от основното изображение;
w1, h1 - широчина и височина в пиксели на отрязъка от изображението;
x2, y2 - координати в пиксели на началната точка за разполагане на отрязъка от изображението;
w2, h2 - определя широчината и височината на показване на отрязъка от изображението. Ако размера не се променя, тези стойности са равни на w1, h1.

Примерна програма за показване на част от изображение върху поле оградено с елемента <canvas> е показана по-долу:

<!DOCTYPE html>
<html>
  <body>

     <h6>Представяне на част от изображение в полето, оградено от елемента <canvas>:</h6>
     <img id="html5" src="http://dimarini.net/images/lessons/html5/html5.jpg" alt="HTML5" width="398" height="177" />
     <canvas id="sampleCanvas" width="228" height="155" style="border:1px solid #000000">
            Браузърът не поддържа елемента canvas 
     </canvas>

     <script type="text/javascript">
          document.getElementById("html5").onload=function(){
                 var c=document.getElementById("sampleCanvas");
                 var ctx=c.getContext("2d");
                 var i=document.getElementById("html5");
                 ctx.drawImage(i,10,20,208,135,10,10,208,135);
           };
     </script>

  </body>
</html>

В браузъра горната програма би изглеждала така:

Представяне на част от изображение в полето, оградено от елемента <canvas>:

HTML5 Браузърът на поддържа елемента canvas

Метод createImageData

Методът createImageData определя нов незапълнен обект. Тук се използва нов метод за определяне на цветове - RGBA. Първите три букви RGB предстваляват трите основни цвята червено, зелено и синьо. Буквата А определя стойност за Alpha, или степента на плътност на цвета. Това е нов начин за представяне на цветове в CSS3. Всички пиксели в новия обект първоначално са определени като прозрачно черно или rgba(0,0,0,0). Методът се определя от два параметъра, които отразяват неговата широчина и височина. За всеки пиксел в обекта се задават четири стойности, които се отнасят за rgba :

  1. За червен цвят (0-255)
  2. За зелен цвят (0-255)
  3. За син цвят (0-255)
  4. За прозрачност на цвета (0-255), където 0 обозначава пълна прозрачност, а 255 напълно видим цвят.

Тази информация се съхранява в матрица чрез свойството .data за обекта. Информацията в матрицата може да се променя и да се задават нови блокове като се използва метода putImageData. По-долу е даден пример за използване на метода:

<!DOCTYPE html>
<html>
<body>

     <p>Създаване на обект на изображение с размер 180x70 пиксела, при който  всеки пиксел е с определен червен цвят (r=191, g=57, b=34) и плътност 60% (a=153):</p>

     <canvas id="sampleCanvas" width="200" height="90" style="border:1px solid #000000;">
     Браузъра не поддържа елемента </canvas>


     <script type="text/javascript">

          var c=document.getElementById("sampleCanvas");
          var ctx=c.getContext("2d");
          var iData=ctx.createImageData(180,70);
          for (i=0; i<iData.width*iData.height*4;i+=4) {
                iData.data[i+0]=191;
                iData.data[i+1]=57;
                iData.data[i+2]=34;
                iData.data[i+3]=153;
           }
          ctx.putImageData(iData,10,10);

     </script>

</body>
</html>

Виж примера в браузъра

Метод getImageData

Методът getImageData създава нов обект. Всички пиксели на новия обект имат същата стойност на rgba както е определено в елемента canvas. С помощта на метода getImageData всеки пиксел може да се проследява отделно. Методът включва четири параметъра, които определят правоъгълник в пиксели (x,y,w,h), където x и y са началните координати на горния ляв ъгъл на правоъгълника, а w и h са широчината и височината на правоъгълника. Този обект не е фигура. Той определя част (в случая правоъгълник) от полето, оградено с canvas и съхранява информация за всеки пиксел на правоъгълника. За всеки пиксел в обекта се задават четири стойности, които се отнасят за rgba, както беше описано за метода createImageData по-горе и съдържа информация за всеки пиксел в този четириъгълник. За всеки пиксел в обекта има информация за четири rgba стойности:

  1. За червен цвят (0-255)
  2. За зелен цвят (0-255)
  3. За син цвят (0-255)
  4. За прозрачност на цвета (0-255), където 0 обозначава пълна прозрачност, а 255 напълно видим цвят.

Тази информация се съхранява в матрица, която е четири пъти по-голяма от размера на четириъгълника, или широчина*височина*4 (w*h*4). Тази матрица се съхранява от свойството .data на обекта. Информацията може да се променя, като се поставят нови фигури на canvas с използване на метода putImageData .

Методът getImageData може да се използва за инвертиране цвета на всеки пиксел от canvas. По-долу е даден пример, в който в canvas е поставено изображение. В примера се преминава през всеки пиксел и се променя цвета по следната формула:

червен = 255 – старо червено
зелен = 255 – старо зелено
син = 255 – старо синьо

Резултатът е инвертирани цветове на изображението, поставено в canvas:

HTML5 Браузърът не поддържа елемента canvas

Програмата за получаване на горната картинка е дадена по-долу:

<!DOCTYPE html>
<html>
<body>
<img id="hummer" src="/images/hummer.jpg" alt="HTML5" width="398" height="177" />
<canvas id="myCanvas" width="398" height="177" style="border:1px solid #d3d3d3;" >
Браузърът не поддържа елемента canvas </canvas>

<script type="text/javascript">
document.getElementById("hummer").onload=function(){
 var c=document.getElementById("myCanvas");
  	 var ctx=c.getContext("2d");
 	 var img=document.getElementById("hummer");
 	 ctx.drawImage(img,0,0);
  var imgData=ctx.getImageData(0,0,c.width,c.height);
    for (i=0; i<imgData.width*imgData.height*4;i+=4)
    {
    imgData.data[i]=255-imgData.data[i];
    imgData.data[i+1]=255-imgData.data[i+1];
    imgData.data[i+2]=255-imgData.data[i+2];
    imgData.data[i+3]=255;
    }
  ctx.putImageData(imgData,0,0);
};
</script>

</body>
</html>