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

使用JavaScript进行基本图形操作与处理 1.图像数据的相关接口 由于HTML5引入了canvas标签，这大大简化了JavaScript处理图像的工作。通过canvas，JavaScript可以对图像进行像素级的操作，甚至还可以直接处理图像的二进制原始数据，这为图像的签名技术提供了支持。另外canvas还提供了常用的图像格式转换功能，可以使用JavaScript简单快捷地更改图像的编码方式。 出于安全考虑，浏览器通常不允许处理跨域图像，但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全警告的方法是使用CORS（Cross-Origin Resource Sharing），具体可以参加/TR/cors/。利用FileReader和canvas相配合，可以读取本地图像文件，比如我们有如下HTML代码： canvas id=myCanvas抱歉，您的浏览器还不支持canvas。/canvas input type=file id=myFile / 这两行HTML代码包含一个id为myCanvas的canvas画布，还包含一个id为myFile的文件选择控件，我们将通过文件选择控件为用户提供选择本地文件的接口，然后利用canvas画布为JavaScript提供图像处理的接口。 下面通过JavaScript为这两个元素绑定事件。为了方便引用，先用两个变量来存储这两个元素：