HTML5 Canvas操作图像像素

操作图像像素

如果要对图像进行进一步的处理，就可以先通过getImageData()方法获取图像像素，进行处理后再通过putImageData()方法，把处理后的像素重新绘制到画布中。

1）getImageData()方法

该方法用于获取画布上指定区域的图像像素数据。调用格式如下：

1. var data = context.getImageData(sx, sy, sWidth, sHeight)

其中，sx、sy为所选区域的坐标，sWidth、sHeight为所选区域的宽度和高度。该方法返回一个指向ImageData对象的引用，其内容为所选区域中的原始像素信息，该对象包括以下三个属性：

width：所选区域中的每行有多少个像素。

height：所选区域中的每列有多少个像素。

data：像素数值的一维数组，保存所选区域中每个像素的RGBA（红、绿、蓝、alpha）值，按该区域从左到右、从上到下按RGBA格式依次保存，如[r1,g1,b1,a1,r2,g2,b2,a2...] 。因此，所选区域中的每个像素，在这个数组中就变成了四个整数值。

说明：

在给定了width和height的canvas上，在坐标(x ,y)处的像素所对应RGBA的计算公式如下：

R：((width * y) + x) * 4

G：((width * y) + x) * 4 + 1

B：((width * y) + x) * 4 + 2

A：((width * y) + x) * 4 + 3

2）putImageData()方法

修改了任何像素的RGBA的值之后，可以通过putImageData()方法把处理后的图像像素重新绘制到画布中。调用格式：

1. context.putImageData(imgdata, dx, dy [, sx, sy, sWidth, sHeight])

其中imgdata为像素数据，dx、dy是绘制目标的位置坐标，sx、sy是imgdata的位置坐标，sWidth、sHeight是imgdata的宽度和高度值（相对imgdata的sx和sy坐标的偏移量）。如果省略可选参数sx、sy、sw、sh，则表示绘制整个imgdata。

putImageData()方法会忽略图形的所有属性，不进行组合操作，也不会用gloabAlpha乘以像素来显示，更不会绘制阴影。

说明：

使用putImageData()方法向canvas中绘制图像数据时，诸如globalAlpha和globalCompositeOperation这样的全局属性，不会影响到所绘制的图像，浏览器也不会在绘制时应用阴影、全局透明度、组合等效果。这是它与drawImage()方法的区别。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

版权声明：本文出自 歪脖网 的《HTML宝典》，欢迎在线阅读，并提出宝贵意见。