使用JavaScript进行基本图形操作与处理选编.docxVIP

使用JavaScript进行基本图形操作与处理1.图像数据的相关接口由于HTML5引入了canvas标签，这大大简化了JavaScript处理图像的工作。通过canvas，JavaScript可以对图像进行像素级的操作，甚至还可以直接处理图像的二进制原始数据，这为图像的签名技术提供了支持。另外canvas还提供了常用的图像格式转换功能，可以使用JavaScript简单快捷地更改图像的编码方式。出于安全考虑，浏览器通常不允许处理跨域图像，但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全警告的方法是使用CORS（Cross-Origin Resource Sharing），具体可以参加/TR/cors/。利用FileReader和canvas相配合，可以读取本地图像文件，比如我们有如下HTML代码：canvasid=myCanvas抱歉，您的浏览器还不支持canvas。/canvasinputtype=fileid=myFile/这两行HTML代码包含一个id为myCanvas的canvas画布，还包含一个id为myFile的文件选择控件，我们将通过文件选择控件为用户提供选择本地文件的接口，然后利用canvas画布为JavaScript提供图像处理的接口。下面通过JavaScript为这两个元素绑定事件。为了方便引用，先用两个变量来存储这两个元素：varmyCanvas = document.getElementById(myCanvas);varmyFile = document.getElementById(myFile);当用户选定一个文件时，我们就应开始通过FileReader读取文件数据，为此监视myFile的onchange事件，并构造FileReader：file.onchange = function(event) {varselectedFile = event.target.files[0];var reader = newFileReader();reader.onload = putImage2Canvas;reader.readAsDataURL(selectedFile);}在这段代码中，onchange事件被激活时会传递一个event参数给处理函数，event的target子属性是一个描述当前文件选择控件的对象，其files属性是一个描述用户已选文件信息的数组。files是数组类型是因为HTML5支持一次选择多个文件，如果文件选择控件没有开启多选模式，那么此数组只有一个元素。接下来创建了一个FileReader对象，将其保存在reader中。reader.onload事件定义了文件加载完成后的操作，reader.readAsDataURL将文件内容读取成Data URL。接下来编写putImage2Canvas函数，这个函数用来将FileReader读取的数据放入canvas中供JavaScript处理：function putImage2Canvas(event) {varimg = newImage();img.src = event.target.result;img.onload = function(){myCanvas.width = img.width;myCanvas.height = img.height;var context = 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读取的结果，由于之前我们将文件内容以Data URL的方式读取，所以可以直接将读取结果作为src创建图像对象。当图像创建完毕后，img.onload事件被激活，此时我们将canvas的尺寸设置成图像的尺寸，然后通过drawImage将图像画在画布上，最后通过getImageData获取图像像素数据供JavaScript处理。下面我们来详细了解下drawImage和getImageData这两个方法，这两个方法将会在后面的章节中一直用到，是JavaScript处理图像用到的最基本的方法。drawImage有三种用法，第一种是只指定图片的绘制位置：context.drawImage(img, x, y);这也是本节开始的代码实例中用到的使用方法，这种方法会将图片左上角置于坐标相对于画布的(x, y)点上，如果画布尺寸足够则画出整个图像，否则将超出画布的部分舍弃，如图1-1