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