HTML canvas getImageData() 方法
實例
下面的代碼通過getImageData() 複製畫布上指定矩形的像素數據,然後通過putImageData() 將圖像數據放回畫布:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
嘗試一下»
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 和Safari 支持getImageData() 方法。
注意: nternet Explorer 8及之前的版本不支持<canvas>元素。
定義和用法
getImageData() 方法返回ImageData 對象,該對象拷貝了畫布指定矩形的像素數據。
注意: ImageData對像不是圖像,它規定了畫布上一個部分(矩形),並保存了該矩形內每個像素的信息。
對於ImageData 對像中的每個像素,都存在著四方面的信息,即RGBA 值:
R - 紅色(0-255)
G - 綠色(0-255)
B - 藍色(0-255)
A - alpha 通道(0-255; 0 是透明的,255 是完全可見的)
color/alpha信息以數組形式存在,並存儲於ImageData對象的data屬性中。
提示:在操作完成數組中的color/alpha信息之後,您可以使用putImageData()方法將圖像數據拷貝回畫布上。
實例:
以下代碼可獲得被返回的ImageData 對像中第一個像素的color/alpha 信息:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
提示:您也可以使用getImageData()方法來反轉畫布上某個圖像的每個像素的顏色。
使用該公式遍歷所有的像素,並改變其顏色值:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
green=255-old_green;
blue=255-old_blue;
請看下面的"嘗試一下"實例!
JavaScript 語法
JavaScript 語法: | context.getImageData(x,y,width,height); |
---|
參數值
参数 | 描述 |
---|---|
x | 开始复制的左上角位置的 x 坐标(以像素计)。 |
y | 开始复制的左上角位置的 y 坐标(以像素计)。 |
width | 要复制的矩形区域的宽度。 |
height | 要复制的矩形区域的高度。 |
更多實例
要使用的圖像:
實例
使用getImageData() 來反轉畫布上的圖像的每個像素的顏色:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var i=0;i<imgData.data.length;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);
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var i=0;i<imgData.data.length;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);
嘗試一下»
HTML canvas參考手冊