使用javascript进行基本图形操作与处理.docx

使用JAVASCRIPT进行基本图形操作与处理1图像数据的相关接口由于HTML5引入了CANVAS标签，这大大简化了JAVASCRIPT处理图像的工作。通过CANVAS，JAVASCRIPT可以对图像进行像素级的操作，甚至还可以直接处理图像的二进制原始数据，这为图像的签名技术提供了支持。另外CANVAS还提供了常用的图像格式转换功能，可以使用JAVASCRIPT简单快捷地更改图像的编码方式。出于安全考虑，浏览器通常不允许处理跨域图像，但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全警告的方法是使用CORS（CROSSORIGINRESOURCESHARING），具体可以参加HTTP//WWWW3ORG/TR/CORS/。利用FILEREADER和CANVAS相配合，可以读取本地图像文件，比如我们有如下HTML代码抱歉，您的浏览器还不支持CANVAS。这两行HTML代码包含一个ID为MYCANVAS的CANVAS画布，还包含一个ID为MYFILE的文件选择控件，我们将通过文件选择控件为用户提供选择本地文件的接口，然后利用CANVAS画布为JAVASCRIPT提供图像处理的接口。下面通过JAVASCRIPT为这两个元素绑定事件。为了方便引用，先用两个变量来存储这两个元素VARMYCANVASDOCUMENTGETELEMENTBYIDMYCANVASVARMYFILEDOCUMENTGETELEMENTBYIDMYFILE当用户选定一个文件时，我们就应开始通过FILEREADER读取文件数据，为此监视MYFILE的ONCHANGE事件，并构造FILEREADERFILEONCHANGEFUNCTIONEVENT{VARSELECTEDFILEEVENTTARGETFILES0VARREADERNEWFILEREADERREADERONLOADPUTIMAGE2CANVASREADERREADASDATAURLSELECTEDFILE}在这段代码中，ONCHANGE事件被激活时会传递一个EVENT参数给处理函数，EVENT的TARGET子属性是一个描述当前文件选择控件的对象，其FILES属性是一个描述用户已选文件信息的数组。FILES是数组类型是因为HTML5支持一次选择多个文件，如果文件选择控件没有开启多选模式，那么此数组只有一个元素。接下来创建了一个FILEREADER对象，将其保存在READER中。READERONLOAD事件定义了文件加载完成后的操作，READERREADASDATAURL将文件内容读取成DATAURL。接下来编写PUTIMAGE2CANVAS函数，这个函数用来将FILEREADER读取的数据放入CANVAS中供JAVASCRIPT处理FUNCTIONPUTIMAGE2CANVASEVENT{VARIMGNEWIMAGEIMGSRCEVENTTARGETRESULTIMGONLOADFUNCTION{MYCANVASWIDTHIMGWIDTHMYCANVASHEIGHTIMGHEIGHTVARCONTEXTMYCANVASGETCONTEXT2DCONTEXTDRAWIMAGEIMG,0,0VARIMGDATACONTEXTGETIMAGEDATA0,0,IMGWIDTH,IMGHEIGHT//处理IMGDATA}}EVENT是READERONLOAD传递的参数，EVENTTARGETRESULT是FILEREADER读取的结果，由于之前我们将文件内容以DATAURL的方式读取，所以可以直接将读取结果作为SRC创建图像对象。当图像创建完毕后，IMGONLOAD事件被激活，此时我们将CANVAS的尺寸设置成图像的尺寸，然后通过DRAWIMAGE将图像画在画布上，最后通过GETIMAGEDATA获取图像像素数据供JAVASCRIPT处理。下面我们来详细了解下DRAWIMAGE和GETIMAGEDATA这两个方法，这两个方法将会在后面的章节中一直用到，是JAVASCRIPT处理图像用到的最基本的方法。DRAWIMAGE有三种用法，第一种是只指定图片的绘制位置CONTEXTDRAWIMAGEIMG,X,Y这也是本节开始的代码实例中用到的使用方法，这种方法会将图片左上角置于坐标相对于画布的X,Y点上，如果画布尺寸足够则画出整个图像，否则将超出画布的部分舍弃，如图11。图11超出画布部分的图像会被舍弃11图像来自WIKIPEDIA，由PAMRI上传。DRAWIMAGE的第二种方法是指定指定图片绘制位置的同时图像的尺寸CONTEXTDRAWIMAGEIMG,X,Y,WIDTH,HEIGHT新绘制的图像会根据指定的尺寸进行放大或缩小，如图12。图12利用DRAWIMAGE缩放图像DRAWIMAGE的第三种用法是截取图片的一部分进行绘制CONTEXTDRAWIMAGEIMG,SX,SY,SWIDTH,SHEIGHT,X,Y,WIDTH,HEIGHTSX和SY指定图像被截取部分左上角在图片上的坐标，SWIDTH和SHEIGHT指定图像被截取部分的尺寸，X和Y指定图像被截取部分画在画布上的位置，WIDTH和HEIGHT指定图像被截取部分在画布上重绘的尺寸。图13中利用DRAWIMAGE截取了图像的一部分并画在了画布上。图13利用DRAWIMAGE截取图片的一部分GETIMAGEDATA方法用来获取CANVAS画布中图像的像素数据，使用方法比较简单，只需指定要获取图像左上角的位置和尺寸即可CONTEXTGETIMAGEDATAX,Y,WIDTH,HEIGHT返回的数据是一个对象，此对象包含三个属性，分别是DATA、WIDTH和HEIGHT，其中DATA就是图像的像素数据。DATA是一个一维数组，顺次记录着每个像素点的RGBA信息。R代表红色，G代表绿色，B代表蓝色，A代表不透明度，其取值范围均为0255。对于A，0代表完全透明，255代表完全不透明。由于DATA是一个一维数组，所以在处理数据时应以每4个元素为单位读取DATAFORVARI0,LENIMGDATADATALENGTHIHEIGHT||JWIDTH{DATAARRAYTEMPPUSH0}ELSE{DATAARRAYTEMPPUSHDATAARRAYIWIDTHJ}}}DATAARRAYDATAARRAYTEMPWIDTHWIDTH2HEIGHTHEIGHT2VARDATATEMPVARDATAARRAY2FORVARI0IXSTARTTEMPARRAYITEMPARRAYI1TEMPARRAYI1TEMPCHANGELOOP1}}}WHILELOOPDATAARRAYYWIDTHXTEMPARRAYMATHROUNDTEMPARRAYLENGTH/2}}RETURNDATAARRAY}图123是通过中值滤波去除图像噪点的结果。查看原图图123利用中值滤波去除图像噪点44频域图像增强频域图像增强的思想是先将图像转换到频域，通过转移函数H得到新的图像频谱，最后再转换到空间域IFFHI对于不同的转移函数H，可以得到不同的增强效果。低通滤波器可以使图像变得更加平滑，常见的低通滤波器有巴特沃斯低通滤波器和梯形低