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

示例地址：Canvas Resize Demo
原文作者：Dr. Tom Trenka
原文日期： 2013年8月6日
翻译日期： 2013年8月8日

Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个巨大的荣誉。Tom是Dojo框架的最初贡献者之一，也是我在SitePen公司的良师益友.我见证了他最顶级的天才能力，并且他总是第一个以前瞻性的解决方案预见了很多棘手的问题。他总是站在局外思考，打破常规但却又坚实可靠地解决边缘问题。本文就是一个完美的例证。
最近我总是被问道要创造一个用户接口API，允许用户上传图片到服务器上(伴随其他的事情),并能在我们公司提供支持的大量网站的客户端上使用。通常来说这都是很容易的事情——创建一个form表单，添加一个file类型的input输入框，让用户从电脑里选择图片，并在form标签上设置enctype="multipart/form-data"表单属性，然后上传即可。非常简单，不是吗？事实上，这里有一个足够简单的例子；点击进入
但是如果你想要通过某些方式预先处理一下图片再上传，那该怎么办？比如说，你必须先压缩图片尺寸，或者需要图片只能是某些种类的格式，如 png 或者jpg,你怎么办？
用canvas来解决!

Canvas简介
canvas 是一个HTML5新增的DOM元素，允许用户在页面上直接地绘制图形，通常是使用JavaScript.而不同的格式标准也是不同的，比如SVG是光栅API(raster API) 而VML却是向量API(vector API).可以考虑使用Adobe Illustrator(矢量图)作图与使用 Adobe Photoshop (光栅图)作图的区别。

在canvas(画布)上能做的事情就是读取和渲染图像,并且允许你通过JavaScript操纵图像数据。已经有很多现存的文章来为你演示基本的图像处理——主要关注与各种不同的图像过滤技术( image filtering techniques)——但我们需要的仅仅是缩放图片并转换到特定的文件格式，而canvas完全可以做到这些事情。

我们假定的需求，比如图像高度不超过100像素，不管原始图像有多高。基本的代码如下所示:

复制代码
// 参数，最大高度
var MAX_HEIGHT = 100;
// 渲染
function render(src){
// 创建一个 Image 对象
var image = new Image();
// 绑定 load 事件处理器，加载完成后执行
image.onload = function(){
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 如果高度超标
if(image.height > MAX_HEIGHT) {
// 宽度等比例缩放 *=
image.width *= MAX_HEIGHT / image.height;
image.height = MAX_HEIGHT;
}
// 获取 canvas的 2d 环境对象,
// 可以理解Context是管理员，canvas是房子
var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，image 没有加入到 dom之中
};
// 设置src属性，浏览器会自动加载。
// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src = src;
};