HTML宝典(第 1 版)
4.4.2 操作图像像素
阅读(

HTML基础

HTML元素

表单及应用

Canvas绘图基础

基本用法

使用路径

绘制文本

处理图像和视频

绘制图像

操作图像像素

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

1)getImageData()方法

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

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()方法把处理后的图像像素重新绘制到画布中。调用格式:

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用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验