2016年6月29日补充:
最近做了一些与表单相关的项目,使用了h5的input
控件,在使用过程中遇到了很多的坑。也包括与这篇文章相关的。
首先我们应该知道使用h5新提供的属性getUserMedia
这个属性,是可以调取系统的摄像头进行拍照或者是摄像的,但是兼容性支持的不好,所以当我们需要获取系统的多媒体权限时我们都不会采用这个属性。
使用<input type="file">
标签我们可以间接的呼起系统选择文件的窗口,来读取系统文件。但是在WebView中,因为安卓权限的问题,我们是没办法直接获取读取文件这个操作的。而在原生的浏览器中是不存在这个问题的。所以选择使用这个input
的时候一定要注意自己的页面是主要运行在webview中还是浏览器中。如果注意运行在客户端的webvie中,是需要客户端的同学支持的。
在IOS的某些系统版本中也会出现这个问题。具体的可以参考下面的参考文章。
参考文章:
http://blog.csdn.net/hvkcoder/article/details/51365191
https://forums.developer.apple.com/thread/22726
http://www.cnblogs.com/soaringEveryday/p/4495221.html
http://stackoverflow.com/questions/25942676/ios-8-sdk-modal-uiwebview-and-camera-image-picker
引子:
最近公司项目有个需求,微博客户端中, h5 的页面上的某个按钮能够与native
交互呼起摄像头,扫描二维码并且解析。在非微博客户端中(微信或者是原生浏览器,如:safari)呼起系统的拍照或者上传图片按钮,通过拍照或者上传图片解析二维码。
第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode
。这个库已经支持在浏览器端呼起摄像头的操作了,但是依赖一个叫getUserMedia
的属性。该属性移动端的浏览器支持的都不是很好,所以只能间接的上传图片的方式解析二维码。
getUserMedia
属性兼容浏览器列表:
首先感谢 jsqrcode 的开发者,提供这么优秀的解析二维码的代码,为我减少了很大的工作量。jsqrcode 地址:点我
我的代码库地址:点我
1.解决的问题:
1.能够在微博客户端呼起摄像头扫描二维码并且解析;
2.能够在原生浏览器和微信客户端中扫描二维码并且解析;
2.优点:
web端或者是 h5端可以直接完成扫码的工作;
3.缺点:
图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近),相对于 native
呼起的摄像头解析会有1-2秒的延时。
说明:
此插件需要配合zepto.js
或者 jQuery.js
使用
使用方法:
1.在需要使用的页面按照下面顺序引入lib
目录下的 js 文件
1 2 3 |
<script src="lib/zepto.js"></script> <script src="lib/qrcode.lib.min.js"></script> <script src="lib/qrcode.js"></script> |
2.自定义按钮的 html 样式
为自定义的按钮添加自定义属性,属性名称为node-type
为 input 按钮添加自定义的属性, 属性名称为node-type
因为该插件需要使用<input type=”file” /> ,该 html 结构在网页上面是有固定的显示样式,为了能够自定义按钮样式,我们可以按照下面的示例代码结构嵌套代码
1 2 3 4 5 |
<div> <div class="qr-btn" node-type="qr-btn">扫描二维码1 <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> </div> </div> |
然后设置 input
按钮的 css
隐藏按钮,比如我使用的是属性选择器
1 2 3 |
input[node-type=jsbridge]{ display:none; } |
这里我们只需要按照自己的需要定义class="qr-btn"
的样式即可。
3.在页面上初始化 Qrcode 对象
1 2 3 4 |
//初始化扫描二维码按钮,传入自定义的 node-type 属性 $(function() { Qrcode.init($('[node-type=qr-btn]')); }); |
主要代码解析
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<pre code_snippet_id="1562226" snippet_file_name="blog_20160122_1_1027181" name="code" class="javascript">(function($) { var Qrcode = function { var Qrcode = function坑。也包括与这篇文章相关的。
首先我们应该知道使用h5新提供的属性 使用 在IOS的某些系统版本中也会出现这个问题。具体的可以参考下面的参考文章。 https://forums.developer.apple.com/thread/22726 http://www.cnblogs.com/soaringEveryday/p/4495221.html http://stackoverflow.com/questions/25942676/ios-8-sdk-modal-uiwebview-and-camera-image-picker 引子:最近公司项目有个需求,微博客户端中, h5 的页面上的某个按钮能够与 第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库
首先感谢 jsqrcode 的开发者,提供这么优秀的解析二维码的代码,为我减少了很大的工作量。jsqrcode 地址:点我 我的代码库地址:点我 1.解决的问题:1.能够在微博客户端呼起摄像头扫描二维码并且解析; 2.优点:web端或者是 h5端可以直接完成扫码的工作; 3.缺点:图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近),相对于 说明:此插件需要配合 使用方法:1.在需要使用的页面按照下面顺序引入
2.自定义按钮的 html 样式 为自定义的按钮添加自定义属性,属性名称为
然后设置
这里我们只需要按照自己的需要定义 3.在页面上初始化 Qrcode 对象
主要代码解析
|