Html5 canvas画图教程22:获取与操作像素信息getImageData

2018-03-09 02:10:58

getImageData的直译即“获得图像数据”,他的作用是从canvas中提取像素出来。所以,他是有返回值的。

语法及返回值

ctx.getImageData(x,y,width,height);

这就是他的语法。而他的返回值是一个ImageData对象:

ImageData { width=10, height=10, data=Uint8ClampedArray}

这个ImageData对象包括:width,height,以及一个像素信息数组data。

这个像素信息数组是重中之重。他包括red,green,blue,和alpha,且每个都是0-255的数值——连alpha也是。

这个data数组的大小由像素个数决定,即ImageData的width*height.如getImageData(1,1,1,1),那data就只有一个像素信息;而getImageData(1,1,10,10),则有10*10=100个。

而像素信息在data中是怎么保存的呢?本来我的理解,data可以是一个二维数组,每个元素就是一个数组,每个元素保存一个像素信息。

但是,我错了。data只是个一维数组

data的元素始终依次是red,green,blue,alpha,red,green,blue。。。一直重复到最后一个。

所以,data的length始终是像素个数*4.而在循环data的时候,也是以4为步进。

了解了这个ImageData对象,那么,像素提取出来有什么用呢?我们可以把提出来的像素进行一些操作,然后放回canvas里,就能得到一幅新的图像——比如类似PS的滤镜效果。

而把ImageData放入canvas的方法,则是putImageData.

ctx.putImageData(imagedata,x,y)

注意,putImageData就没有width,height参数了,因为他们已经包含在了imagedata对象中

图形例子

我画了一个圆形和一个矩形,再从中提取像素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ctx.arc(100,100,50,0,Math.PI*2);
ctx.fillStyle = "rgba(234,1,1,0.6)";
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(1,234,1,0.7)';
ctx.fillRect(100,100,70,100);
ca.onclick = function  (e) {
    var x = e.clientX,
        y = e.clientY,
        caL = ca.getBoundingClientRect().left,
        caT = ca.getBoundingClientRect().top;
    var X = x-caL, Y = y-caT;
    // console.log('X:'+X+',Y:'+Y);
    var imagedata = ctx.getImageData(X,Y,10,10);
    for(var i=0,dl = imagedata.data.length;i<dl;i+=4) {
        imagedata.data[i] = 255-imagedata.data[i];
        imagedata.data[i+1] = 255-imagedata.data[i];
        imagedata.data[i+2] = 255-imagedata.data[i];
    }
    ctx.putImageData(imagedata,X,Y);
    // jg.innerHTML = data.data;
    console.log(imagedata);
}

我把像素提出来后,对每个像素进行了反色(即255-本色),但我没改alpha通道。然后把改变后的imagedata放入canvas中。

效果预览:
[runcode id=’ksjdklj’] 
点图形看结果
[/runcode]

不过,这效果太没特色了,无法激发人的学习欲望。所以我再写一个变图片的吧.

进行图像反色

[runcode id=”sjdk”]原图:偷自w3c

 
点图形看结果
[/runcode]

注意,经实验,imagedata的width和height是只读的

效率问题

如果imagedata.data包含的像素越多,则在循环时耗时更久,对每个像素操作也会花去很多时间。

简单的说,图片越大,得到的像素越多,就越卡!!

总结:

  1. getImageData有返回值,是imageData对象。包括width,height,data

  2. imagedata.data以4为步进

  3. imagedata的width与height不可更改

  4. imagedata不放入canvas中就没有作用


  • 2020-03-11 19:40:56

    java.util.zip.ZipException: zip file is empty

    三、总结 出现 java.util.zip.ZipException: zip file is empty错误,表示你本地使用的jar包或者aar包可能为空,你可以检查下文件大小,如果为空,可以替换本地的jar包或者aar包为正常的jar包或者aar包,或者如果官方有相关的资源的话直接使用官方的依赖资源即可。

  • 2020-03-11 21:22:36

    Vue的组件化之notification组件/Vue.extend()

    一、把组件的内部结构写好,写成一个vue文件notification.vue。 二、全局设置组件属性。//如果后面不需要直接引入组件的方式调用,可以不用全局注册 index.js中一般写的是需要全局设置的属性。

  • 2020-03-13 19:58:19

    推荐Android两种屏幕适配方案

    在Android开发中,由于Android碎片化严重,屏幕分辨率千奇百怪,而想要在各种分辨率的设备上显示基本一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但其在各种奇怪分辨率下表现却不尽如人意,因此下面探索一种简单且低侵入的适配方式。本文将推荐两种屏幕适配方案,大家可以根据实际情况使用。

  • 2020-03-14 16:35:00

    nuxt.js部署全过程(ubuntu+nginx+node+pm2)

    系统的话本篇是Ubuntu 16.04.6 ,centos也行,大同小异都是Linux。不过如果你是初学者,最好和我使用一样的,因为因为发行版本不同而导致的差异可能导致运行某些东西失败,找问题要找好久。windows server不推荐了,企业用的多,小服务器跑windows server比较费劲。

  • 2020-03-14 23:15:25

    icomoon使用详细介绍

    此篇博文讲述如何利用icomoon导入图标,从而把自己想要的都通过icomoon方式进行,大家都知道,网站以及移动端,用图标还是尽量选择这种。因为直接用image有些图标会失真,从而也是前端开发之中,需求去掌握的一项,很简单的就几个步骤。