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

《使用javascript进行基本图形操作与处理》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、使用JavaScript进行基本图形操作与处理1.图像数据的相关接口由于HTML5引入了canvas标签，这大大简化了JavaScript处理图像的工作。通过canvas，JavaScript可以对图像进行像素级的操作，甚至还可以直接处理图像的二进制原始数据，这为图像的签名技术提供了支持。另外canvas还提供了常用的图像格式转换功能，可以使用JavaScript简单快捷地更改图像的编码方式。出于安全考虑，浏览器通常不允许处理跨域图像，但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全警告的方法是使用CORS（Cross

2、-OriginResourceSharing），具体可以参加http://www.w3.org/TR/cors/。利用FileReader和canvas相配合，可以读取本地图像文件，比如我们有如下HTML代码：抱歉，您的浏览器还不支持canvas。这两行HTML代码包含一个id为myCanvas的canvas画布，还包含一个id为myFile的文件选择控件，我们将通过文件选择控件为用户提供选择本地文件的接口，然后利用

3、canvas画布为JavaScript提供图像处理的接口。下面通过JavaScript为这两个元素绑定事件。为了方便引用，先用两个变量来存储这两个元素：varmyCanvas=document.getElementById('myCanvas');varmyFile=document.getElementById('myFile');当用户选定一个文件时，我们就应开始通过FileReader读取文件数据，为此监视myFile的onchange事件，并构造FileReader：file.onchange=function(event){

4、varselectedFile=event.target.files[0];varreader=newFileReader();reader.onload=putImage2Canvas;reader.readAsDataURL(selectedFile);}在这段代码中，onchange事件被激活时会传递一个event参数给处理函数，event的target子属性是一个描述当前文件选择控件的对象，其files属性是一个描述用户已选文件信息的数组。files是数组类型是因为HTML5支持一次选择多个文件，如果文件选择控件没有开启多选模

5、式，那么此数组只有一个元素。接下来创建了一个FileReader对象，将其保存在reader中。reader.onload事件定义了文件加载完成后的操作，reader.readAsDataURL将文件内容读取成DataURL。接下来编写putImage2Canvas函数，这个函数用来将FileReader读取的数据放入canvas中供JavaScript处理：functionputImage2Canvas(event){varimg=newImage();img.src=event.target.result;img.onload=f

6、unction(){myCanvas.width=img.width;myCanvas.height=img.height;varcontext=myCanvas.getContext('2d');context.drawImage(img,0,0);varimgdata=context.getImageData(0,0,img.width,img.height);//处理imgdata}}event是reader.onload传递的参数，event.target.result是FileReader读取的结果，由于之前我们将文件内容以

7、DataURL的方式读取，所以可以直接将读取结果作为src创建图像对象。当图像创建完毕后，img.onload事件被激活，此时我们将canvas的尺寸设置成图像的尺寸，然后通过drawImage将图像画在画布上，最后通过getImageData获取图像像素数据供JavaScript处理。下面我们来详细了解下drawImage和getImageData这两个方法，这两个方法将会在后面的章节中一直用到，是JavaScript处理图像用到的最基本的方法。drawImage有三种用法，第一种是只指定图片的绘制位置：context.drawIm

8、age(img,x,y);这也是本节开始的代码实例中用到的使用方法，这种方法会将图片左上角置于坐标相对于画布的(x,y)点上，如果画布尺寸足够则画出整个图像，否则将超出画布的部分舍弃，如图1-1。图1-1超出画布部分的图