使用getlmageData0、createlmageData()及putlmageDataO进行颜色处理这节我们的所有案例中使用的源图片依然是那张约塞米蒂国家公园照片，
宁波网站制作认为通过drawlmage()被载人画布。之后，我们会通过getImageData0来定义初始的CanvasPixelArray,并在第三步中将其修正。在for循环中，每个像素的RGBA值都通过数学公式计算出来，并被嵌入到此前通过createImageData()所创建的CanvasPixelArray中。最后，我们将结果通过putlmageDataO写人绘图。
代码清单提供了图9中所用到的所有滤镜的JavaScript框架。grayLuminosity()函数并非示例代码中的一部分，它将与其他滤镜一起在稍后出现：
代码清单颜色处理的基本JavaScript框架varimage=newImage();image.src='images/yosemite.jpg';image.onload=function(){context.drawlmage(image,6)；varmodified=context.createlmageData(40)；varimagedata=context.getImageData(〇,,)；干or(vari=0;i
有一个服务器图标，它表示：若你使用nrefox浏览器，此案例只能通过http://服务访问。我们将在节中解释其原因。
免费图像处理程序GIMP在-篇名为《降低饱和度(Desaturate)》(地址为jhttp://docs.gimp.org/en/gimp-tool-desaturate.html)的资料中，提供了三个用于计算图像灰度梯度(shadeofgray)的公式，分别根据明度(Lightness)、亮度(Luminosity)及平均亮度(Average)。我们可以借助这三个公式，用javascript做出3个滤镜：
vargrayLightness=function(r,g,b,a){varval=parselnt((Math.max(r,gJb)+Math.min(r,g,b))*)；
return[val,val,val,a];
>；
vargrayLuminosity=function(r,g,b,a){varval=parselnt((r*l)+(g*l)+(b*7)
return[val,val,val,a];
}；
vargrayAverage=干unction(r,g,bja){varval=parselnt((r+g+b)/3.0
return[val,val,val,a];
}；
我们使用了第二个公式，将每个像素的RGB组成部分通过grayLuminosityO替换为新的计算结果。在这里及以后的计算中，一定记得RGBA值仅能为整数；JavaScript方法parselnt()保证了这一点。
sepiaToneO的算法来自于ZachSmith的一篇文章，其全名为《我如何……使用Cm将图像转化为棕褐色灰度图？》(HowdoI..xonvertimagestograyscaleandsepiatoneusingCm)(见链接http://bit.ly/a2nxI6)。
varsepiaTone=function(r>g,b,a){
varrS=(r*)+(g*0.)+(b*0.l89)；vargS=ir*}+(g*0.)+(b*0.l68);varbS=(r*)+(g*)+(b*Bl)；return[frS>)：parselntfrS),(gS>)：parselntfgS),
(dS>)：parselnt(bS),
a>;];
将RGB三部分的值计算出后，若其大于,则设为。
滤镜invertCo[a-z]o[a-z]()可以用来简单的反转颜色：你仅需要用减去RGB每部分的值：
varinvertColor=function(r,g,b,a){return[(-rha
]；>；
滤镜swapChannelsO用于修改颜色通道的顺序。首先将第四个参数定义为期望的排列顺序数组，0为红色通道、1为绿色通道、2为蓝色通道、3为alpha通道。要改变通道顺序，我们只需要传人按期望顺序排列的RGBA对应数组。在这里，我们用ordex=[2，0,1，3]将RGBA调整为BRGA:
varswapChannels=function(r,g,b,a,order){varrgba=[r,g,b,a];return[rgba[order[0]],rgba:order:1::,rgbaorder,rgbaorder3>；1；最后一个方法[a-z]o[a-z]0C0[a-z]o[a-z]()使用起始像素的灰度作为alpha值，将每个像素的RGB设为特定颜色。第四个参数被定义为期望颜色的RGB值数组——在我们的案例中为蓝色(coloi=[0,])：
varmonoColor=function(r,g,b,a,color){returncolor0],color:l:,color[2J,-(parselnt((r+g+b)/))]；
}；
这里介绍的滤镜都相当简单，用于在不考虑邻近像素的情况下改变个体像素颜色。如果要考虑邻近像素，我们将接触到一些更为复杂的方法，诸如锐化(sharpen)、USM锐化(unsharpmask)及边缘检测(edgedetection)。
鉴于滤镜细节已趄出本书范围，若你需要了解更多，可参考JacobSeidelin的^Pixastic图像处理库(http://www.plxastic.com/lib),禪里有超过30种JavaScript嫌念镜，均基于Mozilla的公开授权。
ThomasPorter和TomDuff是PixarStudios的两名领导人，他们于4年发表了-篇文章，谈论到一些alpha混合技术。这些数字合成技术让他们不仅获得了电影艺术与科学学院奖(AcademyofMotionPictureArtsandSciences)，也让他们在Canvas规范中占据了一席之地。
本文由乐华网络编辑，转载请注明出处
宁波网站制作www.leseo.net
