通过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像素，不管原始图像有多高。基本的代码如下所示:

复制代码

上一篇：HTML5新增的Css选择器、伪类介绍

下一篇：Canvas与Image互相转换示例代码