HTML5 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用户指南》，并全部在 GitHub 上开源。

HTML5 Canvas操作图像像素相关推荐

html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
OpenCV（一）图像读取与新建、图像显示、操作图像像素（2种涂色并比较算法优劣、输出RGB）
目录一.读取图像与新建图像 1.读取图像 2.新建图像二.显示图像 1.过程 2.代码 3.运行效果三.操作图像像素 1.逐RGB涂色(单循环)(快) 1-1.过程 2-2.代码 2-3.运行结 ...
使用canvas操作图像
canvas 获取截图具体是使用 canvas 的 toDataURL 方法: var image = new Image(); image.src = canvas.toDataURL(&qu ...
用 canvas 操作图片像素
canvas 像素操作在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上.将图片绘制上去后,还可以使用 context.g ...
Canvas操作图片像素
Canvas支持直接处理图片中的像素,通过对图片像素进行各种类型的处理,能够实现不同的图片效果,本文的示例图片来自参考文献1,图片像素处理方法参照的参考文献2-7. Canvas主要通过两种方 ...
html5 canvas系列教程-像素操作（反色，黑白，亮度，复古，蒙版，透明）
getImageData:获取一张图片的像素数据 cxt.getImageData( x, y, width, height ) x:图片所在的x坐标 y: 图片所在的y坐标 width,height ...
java canvas旋转_在HTML5 Canvas上将图像旋转90度
我无法使用HTML5画布旋转图像 . 我想我的数学错误,并希望得到任何帮助 . 在移动设备上,我在150px x 558px画布上捕获用户签名 . 我试图创建一个558像素×150像素的图像,这只是旋 ...
HTML5 Canvas像素处理常用接口
内容概要:本文通过简单的代码实例,以及略猥琐的图片demo,展示了canvas在图像像素数据操作方面的常用接口.至于如何利用这几个接口实现更复杂的效果,则会在后续章节里继续讲述. 一.canvas图片 ...
前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...

HTML5 Canvas操作图像像素

操作图像像素

HTML5 Canvas操作图像像素相关推荐

最新文章

热门文章