主机格调

之前手机项目中有图片上传预览功能,都是让同事处理。这次抓住机会,向他请教学习后,自己写了个简单的示例,基本的知识点都罗列出来,希望对大家有帮助。

预览图

二维码DEMO链接

大家直接打开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上,方便开发调用。

一个简单的图片上传预览、压缩示例就完成了。在使用的过程中,或许还会出现部分手机拍照后,预览的效果方向不对,这个以后有机会再聊。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/556.html