HTML5 Canvas像素操作的示例分析

這篇文章給大家分享的是有關(guān)HTML5 Canvas像素操作的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

注意 由于人們可以直接操縱像素數(shù)據(jù)，因此出現(xiàn)了某些人利用從Canvas直接獲取并且修改數(shù)據(jù)的能力做出一些惡意和非法的行為。瀏覽器限制了人們用Canvas跨域獲取圖片數(shù)據(jù)的能力，非同域圖片禁止讀取和修改，

在像素操作的過程中，ImageData 對象保存了圖像像素值。每個對象有3個屬性，即width、height和data。data屬性類型為CanvasPixelArray，用于存儲width*height*4個像素值。每一個像素有RGB值和透明度Alpha值（其值為0至255）。像素的順序從左至右，從上到下，按行存儲。

既然討論像素操作，那么讀者最好能夠從頭到尾了解這一過程，包括讀取、控制和更新Canvas上的像素。這里，我們要介紹3個內(nèi)置方法，即getImageData()、putImageData()、create-ImageData()。

1. getImageData()

getImageData()方法用于從Canvas中復(fù)制某一矩形區(qū)域的像素數(shù)據(jù)。具體的調(diào)用代碼如下：

var canvasData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);

要注意的是，像素級操作的運(yùn)算量非常巨大，以致查看canvasData.data的數(shù)據(jù)時會由于內(nèi)存的消耗過大而導(dǎo)致瀏覽器崩潰，

2. putImageData()

putImageData()方法用于修改或者更新某個圖形區(qū)域中的像素信息，此方法僅能在同域下使用。本地硬盤模式下也無法使用，必須架起Web服務(wù)器。

具體代碼如下：

var canvasData = ctx.putImageData(canvasData, 0, 0);

3. createImageData()

createImageData()方法根據(jù)指定的圖片數(shù)據(jù)（image data）具有的寬高，建立一個ImageData對象。此方法并不會從現(xiàn)有的Canvas中復(fù)制像素，它生成的是完全空白的像素矩陣，它的初始值是全透明的黑色，即 (255,255,255,0)，偽代碼如下：

var canvasData = ctx.createImageData(mycanvas.width,my canvas.height);

canvasData="某些像素數(shù)據(jù)"

ctx.putImageData (canvasData, 0, 0);

下面的代碼中，請務(wù)必在Web服務(wù)器環(huán)境下執(zhí)行，否則無法正確顯示。

<canvas id="mycanvas" width="500" height="500" style="border:1px #000 solid;">

</canvas>

<script type="text/javascript">

var mycanvas = document.getElementById('mycanvas');

var ctx=mycanvas.getContext('2d');

var img=new Image();

img.src="test.png";

img.onload=function(){

ctx.drawImage(img,0,0);

var imgd = ctx.getImageData(0,0,100,200);

var pix = imgd.data;

//下面開始反色處理

for(var i=0,n=pix.length;i<n;i+=4){

pix[i]=255 - pix[i]; //紅

pix[i+1] = 255-pix[i+1]; //綠

pix[i+2] = 255-pix[i+2]; //藍(lán)

pix[i+3] = pix[i+3]; //Alpha

}

ctx.putImageData(imgd,0,0);

imgd = ctx.getImageData(200,100,100,200);

pix = imgd.data;

//透明處理,透明度為0.6

for(var i=0,n=pix.length;i<n;i+=4){

pix[i] = pix[i]; //紅

pix[i+1] = pix[i+1]; //綠

pix[i+2] = pix[i+2]; //藍(lán)

pix[i+3] = pix[i+3]*0.6; //Alpha

}

ctx.putImageData(imgd,200,100);

}

</script>

感謝各位的閱讀！關(guān)于“HTML5 Canvas像素操作的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！