问题:由于浏览器权限问题,无法直接通过调起手机的摄像头功能,从而实现扫一扫功能。
解决思路:
1、做文件上传的工作
2、通过调用手机摄像头实现拍照的功能
3、或者通过打开图库得到二维码图片
附上js,css下载路径
链接:https://pan.baidu.com/s/1-TeW4EG8YwOvTB2elnKV3w
提取码:1030
页面HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>二维码扫描</title>
<link rel="stylesheet" type="text/css" href="lib/my.css">
</head>
<body>
<div>
<div class="qr-btn" node-type="qr-btn">扫描二维码1
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
</div>
</div>
<div>
<div class="qr-btn" node-type="qr-btn">扫描二维码2
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码2" />
</div>
</div>
<div class="result-qrcode">
</div>
<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script src="lib/qrcode.js"></script>
<script>
//初始化扫描二维码按钮,传入自定义的 node-type 属性
$(function() {
Qrcode.init($('[node-type=qr-btn]'));
});
</script>
</body>
</html>
需要注意的点
:本人是通过Springboot搭建的web项目作为Demo实践,在引入css文件和js文件的时候,要把html文件放在templates下面,js和css放在static下面,如下图:
我的调用流程是:在DemoController里面有请求路径,然后localhost:8080/index来进行返回我的页面,具体如下图:
本人使用开发工具用的IDEA2020.3.2;浏览器谷歌火狐都有用,手机是IPhone7 plus 14.2的版本;
具体结果如图:
有问题欢迎留言,有机会一起搬砖!
版权声明:本文为weixin_41895817原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。