之前手机项目中有图片上传预览功能，都是让同事处理。这次抓住机会，向他请教学习后，自己写了个简单的示例，基本的知识点都罗列出来，希望对大家有帮助。
大家直接打开DEMO，查看源代码即可。首先看html和css。
upload_box里有3个元素，上传input、显示预览图img、负责压缩的canvas。然后通过css，让图片水平垂直居中，并且最大宽高均为100%，这样图片就不会撑出upload_box。然后input给了透明度0，看不见，并且z-index给了5，让他处在最高，这样每次点击upload_box，其实都是触发input的change。img和canvas均在下方，img做展示，canvas做压缩并不需要展示，所以透明度为0。
为了方面所以引用了Zepto。然后监听每次input的change事件，主要代码在change后做处理。
首先获取到文件的信息集合fileInfo，然后判断文件是否为image类型（其实在html里加了accept=”image/*”就可以过滤掉非图片类型的选择了）。通过fileInfo，获取到浏览器暂存图片的路径url。
创建一个图片，当图片onload之后，就可以获取到图片的真实宽高了，然后根据自己的需求，把图片按照比例缩放。我例子里的规则是宽高最大为600，哪一边超过了600就等于600，另外一边根据比例来缩小。如果宽高都不足600，就不做缩放。
接着把图片插入页面img中（这里如果先插入页面显示，后获取图片宽高的话，图片宽高会变成网页里显示的宽高，就不准了），就完成图片预览了。
最后我们来做图片压缩。首先赋值压缩后的宽高给canvas，然后创建一个绘图环境ctx，把之前创建图片存放到这个画布里，并且使用压缩后的宽高，这个时候canvas画布的效果就是压缩后图片效果了。不过我这里会看不到，因为我设置透明度为0，各位学习的时候可以弄出来看看。之后通过toDataURL把canvas转为base64，图片质量可以自己写，我写的是0.7，base64就是最后的压缩结果了。把base64存到img上，方便开发调用。
一个简单的图片上传预览、压缩示例就完成了。在使用的过程中，或许还会出现部分手机拍照后，预览的效果方向不对，这个以后有机会再聊。
感觉博主不是windows系统
明显Mac ❓
鼠标和我一模一样 ❗
听不错的