通过Canvas及File API缩放并上传图片完整示例

在上面的例子中，你可以使用canvas 的 toDataURL() 方法获取图像的 Base64编码的值(可以类似理解为16进制字符串,或者二进制数据流).
注意： canvas 的 toDataURL() 获取的URL以字符串开头，有22个无用的数据 "data:image/png;base64,"，需要在客户端或者服务端进行过滤.
原则上只要浏览器支持，URL地址的长度是没有限制的，而1024的长度限制，是老一代IE所独有的。

请问,如何获取我们需要的图像呢？
好孩子,很高兴你能这么问。你并不能通过File 输入框来直接处理，你从这个文件输入框元素所能获取的仅仅是用户所选择文件的path路径。按照常规想象，你可以通过这个path路径信息来加载图像，但是，在浏览器里面这是不现实的。(译者注:浏览器厂商必须保证自己的浏览器绝对安全，才能获得市场，至少避免媒体的攻击，如果允许这样做，那恶意网址可以通过拼凑文件路径来尝试获取某些敏感信息).
为了实现这个需求，我们可以使用HTML5的File API 来读取用户磁盘上的文件，并用这个file来作为图像的源(src,source).

File API简介
新的File API接口是在不违背任何安全沙盒规则下，读取和列出用户文件目录的一个途径—— 通过沙盒(sandbox)限制，恶意网站并不能将病毒写入用户磁盘，当然更不能执行。
我们要使用的文件读取对象叫做 FileReader,FileReader允许开发者读取文件的内容(具体浏览器的实现方式可能大不相同)。

假设我们已经获取了图像文件的path路径，那么依赖前面的代码，使用FileReader来加载和渲染图像就变得很容易了：

复制代码
// 加载 图像文件(url路径)
function loadImage(src){
// 过滤掉 非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log("选择的文件类型不是图片: ", src.type);
} else {
window.confirm("只能选择图片文件");
}
return;
}
// 创建 FileReader 对象 并调用 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function(e){
// 调用前面的 render 函数
render(e.target.result);
};
// 读取文件内容
reader.readAsDataURL(src);
};

请问，如何获取文件呢？
小白兔，要有耐心！我们的下一步就是获取文件，当然有好多方法可以实现啦。例如：你可以用文本框让用户输入文件路径，但很显然大多数用户都不是开发者，对输入什么值根本就不了解.
为了用户使用方便，我们采用 Drag and Drop API接口。

使用 Drag and Drop API
拖拽接口(Drag and Drop)非常简单——在大多数的DOM元素上，你都可以通过绑定事件处理器来实现. 只要用户从磁盘上拖动一个文件到dom对象上并放开鼠标，那我们就可以读取这个文件。代码如下：