用HTML5 可以实现二维码扫描识别的功能吗

用HTML5 可以实现二维码扫描识别的功能吗,第1张

答案是可以。

实现基本步骤:

*** 作摄像头,获取图片

技术要点:MediaStream、GetUserMedia、File api。

利用canvas使用相关算法分析图片识别图片得出结果。

技术要点:getImageData

需要用到的几点技术,

1.fileread读取本地二维码图片信息,构造一个 input[type=file]

2.canvas绘图计算,getImageData信息,然后对信息进行处理

3.canvas离屏技术。

扫描二维码的话,取决于手机摄像头。

Html5文件的话,你需要将制作好的二维码图片放在Html5内容里面。

将建好的网址加在微信公众号,或者是QQ公众的导航上面,或者是网站里面。

当点击进入页面之后,会看到二维码图片。

用手机按压图片,APP会提示扫描图片中的二维码?

点击确定扫描二维码即可。

注释:图片尽量做成像下图一样的,增强二维码的趣味性,吸引其他人扫描。

1.解决的问题:

1.能够在微博客户端呼起摄像头扫描二维码并且解析

2.能够在原生浏览器和微信客户端中扫描二维码并且解析

2.优点:

web端或者是 h5端可以直接完成扫码的工作;

3.缺点:

图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近),相对于 native 呼起的摄像头解析会有1-2秒的延时。

说明:

此插件需要配合zepto.js 或者 jQuery.js使用

使用方法:

1.在需要使用的页面按照下面顺序引入lib目录下的 js 文件

复制代码

代码如下:

<script src="lib/zepto.js"></script>

<script src="lib/qrcode.lib.min.js"></script>

<script src="lib/qrcode.js"></script>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7061039.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存