我們可以直接從HTML5 canvas中獲取單個(gè)像素。通過(guò)ImageData對(duì)象我們可以以讀寫一個(gè)數(shù)據(jù)數(shù)組的方式來(lái)操縱像素?cái)?shù)據(jù)。當(dāng)完成像素操作之后，如果要顯示它們，需要將這些像素復(fù)制到canvas上。
創(chuàng)建一個(gè)ImageData 對(duì)象
要?jiǎng)?chuàng)建一個(gè)ImageData對(duì)象，可以使用2D上下文的createImageData()方法。
- var canvas = document.getElementById("ex1");
- var context = canvas.getContext("2d");
-
- var width = 100;
- var height = 100;
- var imageData = context.createImageData(width, height);
ImageData對(duì)象代表canvas中某個(gè)區(qū)域的底層像素?cái)?shù)據(jù)。它包含三個(gè)只讀的屬性：
- width：圖像的寬度，單位像素。
- height：圖像的高度，單位像素。
- data：包含像素值的一維數(shù)組。
上面的例子中創(chuàng)建了一個(gè)100x100像素的ImageData對(duì)象。
管理像素
在data數(shù)組中的每一個(gè)像素包含4個(gè)字節(jié)的值。也就是說(shuō)每一個(gè)像素由4個(gè)字節(jié)表示，每一個(gè)字節(jié)分別表示紅色，綠色，藍(lán)色和一個(gè)透明度alpha通道(RGBA)。像素的顏色由紅、綠、藍(lán)混合得到的最終顏色決定。透明度alpha通道決定這個(gè)像素的透明度。紅、綠、藍(lán)和alpha通道的值都在0-255之間。這和photoshop中的光的三原色RGB的原理是相同的。
要讀取一個(gè)像素的值，你可以使用下面的代碼：
- var pixelIndex = 0;
- var red = imageData.data[pixelIndex ]; // 紅色
- var green = imageData.data[pixelIndex + 1]; // 綠色
- var blue = imageData.data[pixelIndex + 2]; // 藍(lán)色
- var alpha = imageData.data[pixelIndex + 3]; // 透明度
如果要接收后面的像素值，可以增加pixelIndex的值為4的倍數(shù)。你可以通過(guò)下面的方法來(lái)計(jì)算給定像素的index值。
- var index = 4 * (x + y * width);
在上面的語(yǔ)句中，x和y表示該像素在像素網(wǎng)格中的坐標(biāo)位置。data數(shù)組中的像素會(huì)被初始化為一個(gè)很長(zhǎng)的像素序列網(wǎng)格。它從左上角開始，然后向前移動(dòng)。當(dāng)?shù)竭_(dá)一行的末尾時(shí)，接著從下一行開始顯示。
下面的圖像時(shí)一個(gè)20像素寬，8像素高的ImageData像素?cái)?shù)組。如圖所示，序列從左上角開始，然后向右移動(dòng)，當(dāng)?shù)竭_(dá)一行的最大時(shí)再換行顯示。
復(fù)制像素到canvas上
當(dāng)你完成了像素操作，你可以使用2D上下文的putImageData()函數(shù)將它們復(fù)制到canvas上。putImageData()函數(shù)有兩種格式。第一種格式是復(fù)制所有的像素到canvas中。下面是一個(gè)示例代碼：
- var canvasX = 25;
- var canvasY = 25;
-
- context.putImageData(imageData, canvasX, canvasY);
canvasX和canvasY參數(shù)是canvas上插入像素的x和y坐標(biāo)。
第二種格式的putImageData()函數(shù)可以復(fù)制一個(gè)矩形區(qū)域的像素到canvas中。下面是一個(gè)示例代碼：
- var canvasX = 25;
- var canvasY = 25;
- var sx = 0;
- var sy = 0;
- var sWidth = 25;
- var sHeight = 25;
-
- context.putImageData(imageData, canvasX, canvasY,
- sx, sy, sWidth, sHeight);
sx和sy參數(shù)(sourceX 和 sourceY)是矩形左上角的x和y坐標(biāo)。
sWidth和sHeight參數(shù)(sourceWidth 和 sourceHeight)是矩形的寬度和高度。
從canvas中獲取像素
我們也可以從canvas上獲取一個(gè)矩形區(qū)域的像素到一個(gè)ImageData對(duì)象中。通過(guò)getImageData函數(shù)可以完成這個(gè)操作。例如下面的代碼：
- var x = 25;
- var y = 25;
- var width = 100;
- var height = 100;
- var imageData2 = context.getImageData(x, y, width, height);
width和height參數(shù)是從canvas上獲取的矩形的寬度和高度。
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請(qǐng)注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201507272310.html
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。