HTML5+Canvas调用手机拍照功能实现图片上传(上)


Posted in Javascript onApril 21, 2017

因为最近一段时间,一直在弄微信项目,其中涉及到了证件上传的功能,刚开始的时候一点头绪都没有,上网查了很多资料,QQ群里面也问了不少人,很多人说如果是app程序,可以申请系统权限,然后再去调用系统底层的东西,但是微信是在浏览器里面操作的,我们自定义的页面也是通过微信内置浏览器打开的,而且微信浏览器在内部进行了很多特殊处理,屏蔽了很多东西,所以要在页面调用拍照功能或者是打开手机系统的图库目录是不可能的,当然,这些都只是大伙儿理论上的猜测而已,而在我查了两天的资料之后,发现这个问题原来是可以解决的,而且实现的过程居然也很简单。只是用到了HTML5的file文件上传功能,再配合canvas即可。下面附上源代码:

<html> 
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<meta name="format-detection" content="telephone=yes"> 
<head> 
 <meta charset="UTF-8"> 
 <title>上传证件</title> 
 <style> 
 body { 
  margin: 20px 20%; 
  color:#777; 
  text-align: center; 
 } 
 #result{ 
  margin-top: 20px; 
 } 
 </style> 
</head> 
<body> 
 <h1 class="text-center">上传证件...</h1> 
 <hr/> 
 <input type="file"/> 
 <div id="result" align="center"></div> 
 <hr/> 
 
 <!-- 引入jQuery --> 
 <script type="text/javascript" src="../js/jQuery/jquery-1.9.1.min.js"></script> 
 <script type="text/javascript" src="../js/LocalResizeIMG.js"></script> 
 
 <!-- mobileBUGFix.js 兼容修复移动设备 --> 
 <script src="../js/mobileBUGFix.mini.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
 $("input:file").localResizeIMG({ 
  width: 500, 
  quality: 0.8, 
  success: function (result) { 
  var img = new Image(); 
  img.src = result.base64; 
  console.log(result.clearBase64); 
  //$("body").append(img); 
  $("#result").empty(); 
  $("#result").append(img); //呈现图像(拍照?果) 
  $.ajax({ 
   url: "upLoadImageServlet", 
   type: "POST", 
   data:{formFile:result.clearBase64}, 
   dataType: "HTML", 
   timeout: 1000, 
   error: function(){ 
   alert("Error loading PHP document"); 
   }, 
   success: function(result){ 
   //alert(result); 
   //console.log(result); 
   alert("Uploads success~") 
   } 
  }); 
  } 
 }); 
 </script> 
</body> 
</html>

上面实现的流程导致是这样的,首先在前端把图片进行压缩,因为手机的不同,可能有的手机拍照给力,像素高,拍出来的图片的大小就相对大一些,所以这里通过一个插件进行了压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在Java或者PHP后台进行Base64解码,解出来的路径即为上传图片的路径地址,然后再进行存储,写到文件或者数据库里面。

此外,这里需要说明一个问题:很多人都说到了微信内置浏览器,之前我也一直认为微信内置浏览器就是微信自己开发的一套浏览器,然后对很多东西进行了限制。其实不是这样的,微信本身并没有再重新开发一套浏览器,而是调用的系统自身的浏览器,是根据手机的不同系统而变化的。微信内置浏览器调用的是手机系统默认浏览器,ios和Android系统默认浏览器都是webkit内核,只是对HTML5和CSS3的支持程度可能不同。因为浏览器只是系统的一部分,因此系统默认浏览器不会单独升级,对HTM5、CSS3的支持程度与系统版本有很大关系。安卓版微信直接调用系统浏览器内核, iOS则是调用safari,大家可以看到下面1和3的效果是一模一样的,1是微信浏览器打开的,3则是魅族MX 3自带的系统浏览器打开的效果。

上面我的我都测试过了,可以正常运行。下面附上几张照片:

1、这是在微信里面打开的效果

HTML5+Canvas调用手机拍照功能实现图片上传(上)HTML5+Canvas调用手机拍照功能实现图片上传(上)

2、这是在手机UC浏览器打开的效果:

HTML5+Canvas调用手机拍照功能实现图片上传(上)

HTML5+Canvas调用手机拍照功能实现图片上传(上)

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

HTML5+Canvas调用手机拍照功能实现图片上传(上)HTML5+Canvas调用手机拍照功能实现图片上传(上)

下一篇会讲到在Java后台进行图片上传操作:

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 #Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 #Javascript
H5图片压缩与上传实例
Apr 21 #Javascript
H5手机端多文件上传预览插件
Apr 21 #Javascript
ES6新特性八:async函数用法实例详解
Apr 21 #Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 #Javascript
You might like
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
JS实现时间格式化的方式汇总
2013/10/16 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
js选择器全面解析
2016/06/27 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
js变量提升深入理解
2016/09/16 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
JavaScript命名空间模式实例详解
2019/06/20 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
在Django的session中使用User对象的方法
2015/07/23 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
违反校纪校规检讨书
2014/02/15 职场文书
活动总结格式
2014/08/30 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
务工证明怎么写
2015/06/18 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
Oracle中update和select 关联操作
2022/01/18 Oracle
PYTHON InceptionV3模型的复现详解
2022/05/06 Python