热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

回复内容: 答案是可以。实现基本步骤:操作摄像头,获取图片。技术要点:MediaStream、GetUserMedia、File api。利用canvas使用相关算法分析图片识别图片得出结果。技术要点

回复内容:

答案是可以。
实现基本步骤:
  1. 操作摄像头,获取图片。
    技术要点:MediaStream、GetUserMedia、File api。
  2. 利用canvas使用相关算法分析图片识别图片得出结果。
    技术要点:getImageData

* 涉及到的技术点浏览器们(包括移动端)支持各异,现阶段要开发并投产还不太现实。比如MediaStream的支持情况:caniuse.com/#
* 识别算法是一个难点,不过谢谢github,谢谢开源社区,@Shou Jiesong 的答案中有phonegap的插件地址,支持各种码。 如果是使用phonegap的话,可以使用barcode plugin github.com/phonegap/pho HTML5 是markup language,不能做任何数据处理。如果要做条形码读取,要使用Javascript或PHP.
附上Javascript版的barcode scanner.
badassjs.com/post/65433 html5 并没有增加image 解码扩展功能, 可能需要后台配合实现decode qrcode image.
不过有一个项目LazarSoft/jsqrcode 路 GitHub
使用纯Javascript来解码图片, 自己尝试下吧. 可以的,这两个页面就是使用了 webcam 扫描二维码:
webqr.com/
the-qrcode-generator.com 如果想静态扫描的话前面各位已经回复了很多。

补充一下实时扫描这块,由于iOS目前强制浏览器使用苹果自己的webKit内核,所有iOS的浏览器都不支持getUserMedia,所以基于web的实时扫描是做不到的,具体要看苹果什么时候出替代方案了。

developer.apple.com/app
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模块:jingshiba.com/BarcodeGe
推荐阅读
author-avatar
我还是看好小棠呀
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有