HTML5 Canvas像素操作的示例分析

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

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

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

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

1. getImageData()

getImageData()方法用于從Canvas中復制某一矩形區域的像素數據。具體的調用代碼如下：

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

要注意的是，像素級操作的運算量非常巨大，以致查看canvasData.data的數據時會由于內存的消耗過大而導致瀏覽器崩潰，

2. putImageData()

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

具體代碼如下：

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

3. createImageData()

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

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

canvasData="某些像素數據"

ctx.putImageData (canvasData, 0, 0);

下面的代碼中，請務必在Web服務器環境下執行，否則無法正確顯示。

<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]; //藍

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]; //藍

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

}

ctx.putImageData(imgd,200,100);

}

</script>

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