HTML5 Canvas像素操作

1、html5 canvas像素操作本文介绍canvas中强大的像素操作功能。这是十分有价值的一个功能，有了这一功能，就可以挺直拜访canvas底层像素数据。 注重 因为人们可以挺直操纵像素数据，因此浮现了某些人利用从canvas挺直猎取并且修改数据的能力做出一些恶意和非法的行为。扫瞄器限制了人们用canvas跨域猎取数据的能力，非同域禁止读取和修改， 在像素操作的过程中，imagedata 对象保存了图像像素值。每个对象有3个属性，即width、height和data。data属性类型为canvaspixelarray，用于存储width*height*4个像素值。每一个像素有rgb值和透亮度a

2、lpha值（其值为0至255）。像素的挨次从左至右，从上到下，按行存储。 既然研究像素操作，那么读者最好能够从头到尾了解这一过程，包括读取、控制和更新canvas上的像素。这里，我们要介绍3个内置办法，即getimagedata()、putimagedata()、create-imagedata()。 1. getimagedata() getimagedata()办法用于从canvas中复制某一矩形区域的像素数据。详细的调用代码如下： var canvasdata = ctx.getimagedata(0, 0, mycanvas.width, mycanvas.height);要注重的是，

3、像素级操作的运算量十分巨大，以致查看canvasdata.data的数据时会因为内存的消耗过大而导致扫瞄器崩溃， 2. putimagedata() putimagedata()办法用于修改或者更新某个图形区域中的像素信息，此办法仅能在同域下用法。本地硬盘模式下也无法用法，必需架起web服务器。 详细代码如下：var canvasdata = ctx.putimagedata(canvasdata, 0, 0); 3. createimagedata()createimagedata()办法按照指定的数据（image data）具有的宽高，建立一个imagedata对象。此办法并不会从现有的c

4、anvas中复制像素，它生成的是彻低空白的像素矩阵，它的初始值是全透亮的黑色，即 (255,255,255,0)，伪代码如下：var canvasdata = ctx.createimagedata(mycanvas.width,my canvas.height);canvasdata="某些像素数据"ctx.putimagedata (canvasdata, 0, 0); 下面的代码中，请务必在web服务器环境下执行，否则无法正确显示。var mycanvas = document.getelementbyid(&39;mycanvas&39;);var ctx=mycanvas.getcontext(&39;2d&39;);var img=new image();img.src="test.png"img.onload=function()ctx.drawimage(img,0,0);var imgd = ctx.getimagedata(0,0,100,2