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

本文依然顽固的属于《html5 Canvas画图系列教程

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’]ca
点图形看结果
[/runcode]

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

进行图像反色

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

ca
点图形看结果
[/runcode]

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

效率问题

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

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

总结:

  1. getImageData有返回值,是imageData对象。包括width,height,data
  2. imagedata.data以4为步进
  3. imagedata的width与height不可更改
  4. imagedata不放入canvas中就没有作用

9 评论

  1. getImageData一直报错:
    Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

    这个问题怎么解啊,我搜到的方法:
    1.换浏览器,google,firefox,360都不管用啊。
    1.ctx.crossOrigin = ‘anonymous’; 无效!
    2.浏览器–allow-file-access-from-files。无效!
    3.用PHP把图像转换成字符串存储,我只会javascript,虽然语法相似,但是看起还是头疼。感觉此方法可能管用,正在寻找javascript把图片转换成字符串存储的方法,头疼中!!!!求助啊!!!!!!!

    1. 你好,我最近也遇到了这个问题,请问你现在找到了解决方法吗?

  2. Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

    请问这问题该怎么解决?

  3. 问个问题,我有一副黑白的图片,能够用canvas解析出轮廓坐标么?

    1. 这当然没问题,canvas可以实现大部分PS滤镜效果,你要的类似于“加亮边缘”,有专门的算法,但我对算法基本没学过,你可以去html5rock上找找,我曾经看到过

发表评论

电子邮件地址不会被公开。