HTML5 Canvas调用手机摄像头功能上传图片(一)

因为最近一直在做微信项目，涉及到上传文档的功能。开始的时候，我一点头绪都没有。我在网上搜了很多资料，问了很多QQ群里的人。很多人说如果是app程序，我可以申请系统权限，然后调用系统底层。但是微信是在浏览器中操作的，我们的定制页面也是通过微信内置的浏览器打开的。而且微信浏览器内部进行了很多特殊处理，屏蔽了很多东西，无法调用页面上的拍照功能，也无法打开手机系统的图库目录。当然，这些只是理论上的猜测，但我查了两天数据后，发现这个问题是可以解决的，实现过程其实很简单。只需使用HTML5的文件上传功能，然后配合画布即可。源代码附后如下：

html meta name=' viewport ' content=' height=device-height，width=device-width，initial-scale=1.0，minimal-scale=1.0，maximum-scale=1.0，User-scalable=no ' meta name=' format-detection ' content=' phone=yes ' head meta charset=' utf-8 ' title上传证书/title style body { margin : 20px 20%；color: # 777文本对齐：中心；} #结果{ margin-top : 20px；}/style/head body h1 class=' text-center '上传证书./h1hr/input type=' file '/div id=' result ' align=' center '/div HR/！-引入jquery-脚本类型=' text/JavaScript ' src=' http :/js/jquery/jquery-1 . 9 . 1 . min . js '/script script type=' text/JavaScript ' src=' http 3360./js/localresizeimg。- mobileBUGFix.js兼容修复移动设备-脚本src=' http:/js/mobile bugfix . mini . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(' input 3360 file ')。localResizeIMG({ width: 500，quality: 0.8，success:函数(结果){ var img=new Image()；img . src=result . base64；console . log(result . clearbase64)；//$(“body”)。追加(img)；$('#result ')。empty()；$('#result ')。追加(img)；//渲染图像(照片结果)$。Ajax ({url: '上传图像servlet '，type:' post '，data: {formfile:result。clearbase64}，datatype3360' html '，timeout: 1000，error: function(){ alert('加载PHP文档时出错')；}，success:函数(结果){ //alert(结果)；//console.log(结果)；提醒('上传成功~ ')} })；} });/script/body/html上面实现的过程导致了以下结果：首先，图片在前端被压缩。由于手机的不同，有些手机可能会拍摄像素较高的图片，而拍摄的图片尺寸相对较大，所以会通过一个插件进行压缩，然后转换成Base64代码，再用AJAX将Base64代码POST到服务器上。然后在Java或PHP后台进行Base64解码，解出来的路径就是上传图片的路径地址，然后存储写入文件或数据库。

另外，这里有一个问题需要说明：很多人都讲过微信内置浏览器，我一直以为微信内置浏览器是微信自己开发的一套浏览器，然后限制了很多东西。事实上，情况并非如此。微信本身并没有重新开发浏览器，而是调用了系统本身的浏览器，根据手机系统的不同而变化。微信内置浏览器调用手机系统默认浏览器，ios和安卓系统默认浏览器为webkit内核，但对HTML5和CSS3的支持程度可能不同。由于浏览器只是系统的一部分，系统默认浏览器不会单独升级，对HTM5和CSS3的支持程度与系统版本密切相关。安卓版微信直接调用系统浏览器内核，iOS调用safari。可以看到下面1和3的效果完全一样：1是打开的微信浏览器，3是魅族MX 3打开的系统浏览器。

以上和我的都测试过了，可以正常工作。下面附上几张照片：

1.这就是在微信打开的效果

2.这是在手机的UC浏览器中打开的效果：

3.这是在系统自带的浏览器中打开的效果(ps:我的手机是魅族MX 3)，但这不是打开系统图库目录，而是直接定位系统的文件夹根目录。

下一篇文章将讨论在Java背景下上传图片：

HTML5 Canvas jQuery调用手机摄像头功能上传图片(2)

插件地址：https://github.com/think2011/LocalResizeIMG

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。