使用JavaScript进行基本图形操作与处理_javascript 基本图形操作与处理-CSDN博客

http://www.ituring.com.cn/article/121428

仅截取了HTML5 File API相关段落。此连接截取内容之后有大量高大上的傅立叶变换的操作讲解。

由于HTML5引入了canvas标签，这大大简化了JavaScript处理图像的工作。通过canvas，JavaScript可以对图像进行像素级的操作，甚至还可以直接处理图像的二进制原始数据，这为图像的签名技术提供了支持。另外canvas还提供了常用的图像格式转换功能，可以使用JavaScript简单快捷地更改图像的编码方式。

出于安全考虑，浏览器通常不允许处理跨域图像，但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全警告的方法是使用CORS（Cross-Origin Resource Sharing），具体可以参加http://www.w3.org/TR/cors/。

利用FileReader和canvas相配合，可以读取本地图像文件，比如我们有如下HTML代码：

<canvas id="myCanvas">抱歉，您的浏览器还不支持canvas。</canvas>
<input type="file" id="myFile" />

这两行HTML代码包含一个id为myCanvas的canvas画布，还包含一个id为myFile的文件选择控件，我们将通过文件选择控件为用户提供选择本地文件的接口，然后利用canvas画布为JavaScript提供图像处理的接口。

下面通过JavaScript为这两个元素绑定事件。为了方便引用，先用两个变量来存储这两个元素：

var myCanvas = document.getElementById('myCanvas');
var myFile = document.getElementById('myFile');

当用户选定一个文件时，我们就应开始通过FileReader读取文件数据，为此监视myFile的onchange事件，并构造FileReader：

file.onchange = function(event) {
    var selectedFile = event.target.files[0];
var reader = new FileReader();
    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) {
    var img = new Image();
    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);
        var imgdata = context.getImageData(0, 0, img.width, img.height);
        // 处理imgdata
    }
}