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中有关IE版本检测
Jan 04 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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/03 咖啡文化
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
PHP实现递归的三种方法
2020/07/04 PHP
PHP中SESSION过期设置
2021/03/09 PHP
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
python图书管理系统
2020/04/05 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
python输入中文的实例方法
2020/09/14 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
党员批评与自我批评
2014/02/12 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript