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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
禁止F5等快捷键的JS代码
Mar 06 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
消防安全标语
2014/06/07 职场文书
本科生自荐信
2014/06/18 职场文书
超市开店计划书
2014/09/15 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
免职通知
2015/04/23 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python