html5 canvas 图片像素

三水清 2013-04-02 718 阅读

html5 canvas图像转换成数组 html5的canvas可以进行图片处理，图片是由像素组成的。我们知道canvas有方法getImageData，返回的对象中可以取出，image的data 数组（类似数组的Type Array类型数组，Uint8ClampedArray）。 假设canvas宽高是500*400，那么应该有200000个像素点，而通过getImageData().data获取的data数组的length是800000。我们还知道rgba表示颜色的方法，r=red，g=green，b=blue，a=alpha；即红绿蓝三原色和透明值。 所以这个data数组是每四个数组值代表一个像素点。这样一来，一个图像就转化成了数据表示的数组。如下面的代码： var canvas = document.getElementById('canvas'); var ctxt = canvas.getContext('2d'); var img = new Image; img.onload = function(){ ctxt.drawImage(img, 0, 0); var data = ctxt.getImageData(0, 0, 480, 480).data; console.log(data, data.toString()); } img.src = 'img/pic.jpg'; 图像数组的遍历 如上面的代码，我们可以看到数组data就是图片转换成的数组，那么遍历这个数组就可以取得图片的像素点内容： var data = ctxt.getImageData(0, 0, 480, 480).data; for(var i =0,len = data.length; i 14，速度会快 反相（反转）：就是将一个颜色换成它的补色。补色就是用255（8位通道模式下，255即2的8次方，16位要用65535去减，即2的16次方）减去它本身得到的值：R(补) = 255 – R。 其他算法需要基色和混合色配合可以参考：

作者：三水清

专注前端开发,分享Javascript/CSS/PHP等Web前端开发技巧

原文地址：html5 canvas 图片像素, 感谢原作者分享。

→javascript的类型数组（Typed Array） ←ECMAScript 262 5th ：执行环境一些概念解释

发表评论

您可能感兴趣的博客

博主 发表 2013-05-20 03:44:01 将HTML5 Canvas的内容保存为图片

html5 发表 2016-12-05 02:38:38 JS实现HTML5 Canvas图像数据和图片的互相转化

博主 发表 2013-04-02 21:40:21 html5 canvas 图片像素

十年灯 发表 2014-03-10 09:30:25 html5 Canvas画图教程27:isPointInPath

囧克斯 发表 2013-10-11 08:15:29 通过HTML5 Canvas API调节图像的亮度和颜色

cc 发表 2013-08-03 08:26:21 36个炫丽的html5 canvas展示

sxwgf 发表 2015-11-29 23:00:48 HTML5 Canvas气温折线图表 带Tooltip提示框

博主 发表 2013-04-12 03:26:29 基于canvas将图片转化成字符画

camnpr@163.com (佚名) 发表 2015-07-05 01:23:11 使用FormData对象提交表单及上传图片的方法（php+html5）

sxwgf 发表 2017-02-04 09:22:54 HTML5 Canvas 圆形进度条 显示数字百分比

阿安 发表 2013-04-12 03:26:29 基于canvas将图片转化成字符画

管理员 发表 2013-05-30 05:36:39 我们能用HTML5 Canvas做什么？

您可能感兴趣的代码

2012-11-18 02:21:13html5 canvas绘制圆形发散效果的图形 by 司马

2013-04-25 10:11:37一个超炫的htm5 canvas效果 by 灵剑子

2012-12-07 13:38:20html5 canvas绘制左右渐变效果的图形 by 王笃亭

2013-08-22 17:48:39向一个 canvas 上的矩形应用透明度 by 猩猩总统

2013-11-07 20:09:42通过html5的canvas绘制线条 by 龙堂修罗

2012-11-01 20:49:38HTML5 画布(CANVAS) 的例子 by JustForFly

2012-12-10 20:36:54html5 canvas绘制镂空字体的文本 by YuChao

2013-02-13 09:08:26html5 canvas 实现的3D玫瑰花，情人节快乐 by 冬夜微风

2013-10-15 11:32:08初始化一个html5的canvas画布 by init0

2013-11-10 16:58:37html5 把指定的图片绘制到Canvas by tsl0922

2014-01-18 11:55:18Html5 canvas绘制径向渐变图形 by starstroll

2013-03-11 11:17:45使用html5的canvas绘制贝塞尔曲线 by demon