用HTML5可以实现二维码扫描识别的功能吗?
时间:2021-07-01 10:21:17
帮助过:39人阅读
回复内容:
答案是可以。
实现基本步骤:
- 操作摄像头,获取图片。
技术要点:MediaStream、GetUserMedia、File api。 - 利用canvas使用相关算法分析图片识别图片得出结果。
技术要点:getImageData
* 涉及到的技术点浏览器们(包括移动端)支持各异,现阶段要开发并投产还不太现实。比如MediaStream的支持情况:
http://caniuse.com/#feat=stream* 识别算法是一个难点,不过谢谢github,谢谢开源社区,@Shou Jiesong 的答案中有phonegap的插件地址,支持各种码。
如果是使用phonegap的话,可以使用barcode plugin
https://github.com/phonegap/phonegap-plugins/tree/master/iOS/BarcodeScanner
HTML5 是markup language,不能做任何数据处理。如果要做条形码读取,要使用javascript或PHP.
附上javascript版的barcode scanner.
http://badassjs.com/post/654334959/barcode-scanning-in-javascript
html5 并没有增加image 解码扩展功能, 可能需要后台配合实现decode qrcode image.
不过有一个项目LazarSoft/jsqrcode 路 GitHub
使用纯javascript来解码图片, 自己尝试下吧.
可以的,这两个页面就是使用了 webcam 扫描二维码:
https://webqr.com/https://www.the-qrcode-generator.com/scan
如果想静态扫描的话前面各位已经回复了很多。
补充一下实时扫描这块,由于iOS目前强制浏览器使用苹果自己的webKit内核,所有iOS的浏览器都不支持getUserMedia,所以基于web的实时扫描是做不到的,具体要看苹果什么时候出替代方案了。
https://developer.apple.com/app-store/review/guidelines/2.17 Apps that browse the web must use the iOS WebKit framework and WebKit Javascript
Is WebRTC ready yet?
可以在线识别出来的,可以看这里 二维码在线扫描器,二维码在线解码安全检测
就是用的JS和html解析的,但只能在支持html5的浏览器上使用的。
需要用到的几点技术,楼上也说了的
1.fileread读取本地二维码图片信息,构造一个 input[type=file]
2.canvas绘图计算,getImageData信息,然后对信息进行处理
3.canvas离屏技术。
最重要的,是qrdecode的算法,引用的github的开源项目。 LazarSoft/jsqrcode · GitHub
把里面的JS合并,结合canvas就可以使用了。具体的可以看下我上面给的一个案例!
可以识别的。具体看工具:在线二维码内容识别 代码是js,所以你就用console看吧,没有混淆~
最新修改,做成了chrome浏览器插件。名字叫‘极简二维码’,在插件市场搜索一下即可体验…
可以试试这上面的API模块:
http://www.jingshiba.com/BarcodeGenerator/