html5调用手机相机并压缩、上传

近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传。
从功能上看,原生的实现应该是最好的。毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑!
吐槽归吐槽,但是折腾的劲头不能丢!

使用input file[camera]属性调用相机

简直So easy!

只需要这么一条简单的代码,在手机浏览器点击就可以打开相机了。

capture是什么?其实就是对打开方式的设置。

魅族MX5测试结果:

  • 谷歌浏览器可以打开相机和摄像功能,其他方式均为相机、图库、文件管理器等混合选择项。
  • 自带浏览器打开均为文件管理器。

由此说明此属性兼容性还是个问题。不过这并不能阻止我继续折腾下去!

图片压缩

在如今这个手机普遍千万像素的时代,一张照片动辄5M的大小。作为一个良心的开发者,我们是要为用户的流量负责的。
该怎么做?我也不知道。大家都在用canvas实现,我也就用了。

不管文件域是用何种方式打开的,都可以在 change 事件中获取到选择的文件或拍摄的照片。

创建一个FileReader对象,我们需要调用readAsDataURL把文件转换为base64图像编码,如data:image/jpeg;base64……这种格式。
onload是一个异步回调,当文件读取完执行该方法内代码。this.result记录读取结果,如果读取失败,该值为null。在这里进行图片压缩的具体操作。

创建一个Image对象,给src属性赋值为读取结果,同样在onload异步回调中编写处理图片的代码。
这里就要开始使用canvas进行图片压缩了。

首先是尺寸按比例缩放,然后把图片绘到画布上,最后调用toDataURL方法压缩图像质量。

代码里省略了一些校监操作,如文件类型约束和文件大小判断(小于一定值可以不压缩)。
最后就是把数据发送到后端的操作,这里就不说了。

Html5调用摄像头

通过以上的代码已经可以实现调用手机相机拍照、压缩、上传这一整套流程了。
不过在折腾的过程中也发现了一种调用摄像头的方法。注意,是摄像头!使用input调用的是相机。其中的差别就是摄像头是只捕获画面,相机还包括原生的一些拍照、设置等控件。

通过对摄像头的调用可以做很多有趣的事,比如拍照美化、滤镜等。可以说实现一个第三方相机是没问题的。
之前下载过一款安卓相机APP,不到100K的大小,可以实现拍照的一些风格化,也许就是Html5实现的呢。

需要用到的是 getUserMedia API,具体的实现这里就不贴了。

from:http://www.imys.net/20150916/webapp-input-use-camera.html