三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

  canvas的像素级操作——4.关注性能 作者:Neoxone    发表时间: 2012年01月17号,星期二     阅读:18,623 次  

我们开篇就提过,canvas的像素级操作相对来说是很低效的。

我们试着写一个图片切割效果。

对于这个效果,因为我们并不需要操作图像的rgba数据,而只是把图像进行分割,所以利用putImageData的后四个可见区参数进行了设置就行了。
但是,这样做的性能却非常不理想。因为我们操作的ImageData数据实在太多了,循环执行了2750遍,相当于我们对整幅图像进行了2750次的像素级复制,而其实在可见区之外的ImageData数据并不是我们所需要的。

那么,我们在对源图getImageData的时候,可以只获取我们需要的ImageData。

第二种做法虽然在循环的时候多运行了一个方法(共执行2750次的getImageData和putImageData方法),但因为操作的ImageData少了2750倍,所以在效率上比第一种方式高了很多。

但从流程上来讲,我们只需要在刚开始的时候获取一次源图的ImageData(执行getImageData),对数据进行再排列后,最后再输出一次新的ImageData(执行putImageData)就可以了。
根本不需要在循环中反复调用getImageData和putImageData。所以现在的关键点是get和put之间的如何对数据进行重排列。

ImageData.data可以看做一个矩形矩阵,我们已知,它的序列号(n)与ImageData.width(w),及x轴序列号(x),y轴序列号(y)的关系是:n = ((y * w) + x) * 4; (其中的4表示了RGBA四个数据)。我们要的新的输出ImageData,其实是x加倍,y加倍,w加倍的一个新矩阵。那么新矩阵序号与原x,y,w的关系式应该是:t = ((y * 2 * w * 2) + x * 2) * 4;

第三种方法相对于第二种方法的效率提高了十几倍。第三种方法的关键点是找出新旧矩阵之间的关系,对于我们这一例来说还比较容易,复杂一点的,算法可就没这么简单了。

——————————————
重要补充:

我们先总结下三种方法:第一种:效率低差,但理解起来最简单。第三种,算法复杂,但效率最高。第二种,折中。
然而,如果使用的是webkit,opera浏览器,我们会发现第一种方法的效率比之第三种方法居然差不了多少!
可以看出webkit,opera对putImageData做过优化。对于putImageData(imgdata, x, y, x, y, 1 ,1)方法,webkit,opera只对(x,y,1,1)这个1平方px区域内的数据进行了put操作,区域外的数据并没有进行操作,这样在效率上会有很大的提高。
可惜的是firefox(9)就没有做过优化。要加油啊,Mozila!
最新测试了下ie9,结果显示第一种方法的效率的确很低,而第二种方法比第一种方法的效率还要低一倍。看来ie9果然也没用对putImageData进行优化,而且ie9下的getImageData也没用像其他浏览器下那么优化。对于getImageData(x,y,1,1)的获取,它操作的整个图像的像素数据的,而不是那个1平方px内的数据。

目前来说,考虑到各个浏览器原生方法的效率问题,第三种方法是最优的,即不要反复调用getImageData和putmageData,因为某些浏览器下一旦调用就是操作全部imageData的,而不会看你的参数。不过在未来,各个浏览器肯定会对原生方法进行优化的,在考虑第一种方法的时候就不用有所顾忌了!

   

  canvas的像素级操作——3.使用卷积矩阵 作者:Neoxone    发表时间: 2012年01月12号,星期四     阅读:6,816 次  

利用卷积矩阵(Convolution Matrix)操作像素,我们可以很方便的得到诸如模糊、边缘检测、锐化、浮雕和斜角这样的效果。

常用的矩阵类型是 3 x 3 矩阵,另外还有5 x 5的矩阵。

工作原理:http://flex4jiaocheng.com/blog/280

点阵图中的每一个像素被称为“初步像素”,用与卷积矩阵同样面积的“初步像素”从左到右从上到下与卷积矩阵中相应位置的值相乘,再将得到的9个或25个中间值相加,就得到了“初步像素”矩阵中央的一个值的结果值再与Divisor(因子)相除,与Offset(偏移量)相加,最后得到终值。如下图所示:

应用卷积矩阵实现特效:

上面demo中卷积的实现函数来自于在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

推荐一篇有趣的文章:卷积的物理意义

   

  canvas的像素级操作——2.RGBA通道调色 作者:Neoxone    发表时间: 2012年01月12号,星期四     阅读:3,676 次  

在前文里我们已经提到了ImageData,它包含了三条数据{width,height,CanvasPixelArray},而其中CanvasPixelArray存储了所有像素点的RGBA数据,第一个像素的red,green,blue,alpha通道值对应的就是CanvasPixelArray[0]-CanvasPixelArray[3],如此按从左往右,由上往下依次存储。

我们通过修改像素点的rgb值就能改变像素的色相,修改alpha值就能改变像素的不透明度。

上面的demo中,我们创建了一个50*50像素点的ImageData,那么ImageData.data包含的数据应该是有 50 x 50 x 4 条。
每12条一循环(即每隔两个像素),像素点的rgba值,没有经过设置的像素点,它们的缺省值是:[255,255,255,255]。

上例是,创建新的ImageData,相当于所有ImageData的初始值都是255。
下面针对图像的ImageData进行计算设值,以此改变图像的色相。这是一个RGB彩色转gray的效果。(效果同ie的滤镜:filter:gray();已经最新出现的webkit滤镜:-webkit-filter: grayscale(1);)

上面没有对ImageData.data做一次循环,而是对ImageData.width,ImageData.height做了两次循环。
两种循环其实是一样的。可以看下关系:ImageData.data.length = ImageData.width x ImageData.heigh x 4;
data的序号 n = ( (y * ImageData.width) + x) x 4 ;

而关于RGB转gray运算算法的知识,还可以参见这两篇文章:彩色转灰度算法RGB向灰度转换的原理

在上例中,出现了一个canvas对象的新方法toDataURL,这个方法会将canvas对象转换成data_URIs,一个base64 strings。这样就能出现在image标签下中的src中了。

canvas提供像素级数据,为很多算法的应用提供了平台,实现photoshop中的众多神奇图像效果在前端都已成为可能。
甚至于我们还能实现电影的蓝幕效果——针对video的帧,通过drawImage绘进canvas,再做rgba处理,将规定颜色的像素的alpha值设为0,就能使特定部分变成透明,进而实现视频合成。查看演示

   

  canvas的像素级操作——1.引子 作者:Neoxone    发表时间: 2012年01月6号,星期五     阅读:10,181 次  

本文是对《MDC的canvas经典教程辑和个人学习笔记》的补遗,也是canvas像素级操作系列文章的一个引子。
后面我会陆续发一些canvas素级操作的应用,特效方面的文章。

既然是引子,那就不能开门见山的介绍了,我们先讲讲如何复制canvas.
已知一个image对象,我们将其绘制进canvas的方法是什么?drawImage。(当然使用createPattern模板填充也是一个方法)。
那已知一个canvas对象,我们将其绘制进另一个canvas的方法呢?
答案还是drawImage,drawImage算是一个很辽阔的方法了,不仅可以绘image,也可以绘canvas对象,甚至还可以绘video的帧。

并且他拥有大量参数:(Image [, vXSrc] [, vYSrc] [, vWSrc] [, vHSrc], vXDest, vYDest [, vWDest] [, vHDest]),这个读者可以先不管,往下看。

那么,除了drawImage这个方法,还有没有其他方法呢——有,putImageData方法隆重登场。

上面的cloneData方法就是通过将源canvas中像素数据ImageData,输出(putImageData)到新的canvas中,达到复制作用。

不过,我们在获取和输出ImageData的过程中,并没有对ImageData做过任何处理,而这个ImageData数据是包含{width,height,CanvasPixelArray},其中CanvasPixelArray包含了图像(canvas也可看做图像)的每一个像素的RGBA数据,可见中间的操作空间是很大的,以后我们会做重点讨论。

插注:CanvasPixelArray——在最新标准中已引入一个Uint8ClampedArrayTyped Array来替代 ,在各浏览器实现之后,将使得对ImageData的操作更快速更便捷。参考例子:http://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/

下面介绍一下像素操作的三个方法:

createImageData();
getImageData();
putImageData();

createImageData的参数是(w,h)可以新建一个W*H尺寸的新的ImageData【firefox3.5开始支持】,不过也可以使用参数(anotherImageData)来创建【firefox5开始支持】。

getImageData的参数(x,y,w,h)表示起点x,y,尺寸w,h。可以获取canvas.context中在参数范围内的ImageData。

putImageData的参数使用要着重要介绍下(和drawImage的参数可以触类旁通):

putImageData参数有(ImageData, dx, dy [, DirtyX] [, DirtyX] [, DirtyWidth] [, DirtyHeight])

imageData:包含了图像的width,height,还有一个CanvasPixelArray,前面已经提了。
dx, dy:表示绘图起始位置。相对于canvas区域左上角。
后面四个可选参数:表示可见区范围。相对于起绘点,即上面的参数dx,dy表示的点。缺省为0,0,ImageData.width,ImageData.height。

   

  获取元素尺寸和位置的两个冷门方法 作者:Neoxone    发表时间: 2012年01月4号,星期三     阅读:3,251 次  

获取元素的尺寸,似乎offsetWidth/Height就可以了,还需要什么方法吗?
的确,一般情况下,获取元素尺寸,用offsetWidth/Height就搞定了,但如果这个元素是display:none的呢?
试验一下就知道,none元素的尺寸是0。

所以需要我们下面的这个方法来获取。

第二个,获取元素的位置。
或许你经常使用offsetLeft/Top来获取位置,不过offsetLeft/Top是相对 offsetParent的位置(在ie6,7下是相对直接父级的),并且在firefox下还有些小bug

下面这个方法提供获取元素相对于窗口(页面可视区)的距离。

这个方法是由ie提出的,不过在其他浏览器吸收之后,还加了width,height两个值。

重复一下,这个方法是相对于页面窗口的,至于相对于整个页面文档的距离,那只需加上scrollTop这些值就行了,不做赘述。