• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 用 HTML5 可以实现二维码扫描识别的功能吗?

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您

回复内容:

答案是可以。
实现基本步骤:
  1. 操作摄像头,获取图片。
    技术要点:MediaStream、GetUserMedia、File api。
  2. 利用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/

您可能想查找下面的文章:

相关文章

  • 2018-12-03phonegap使用方法介绍(二)获取位置信息
  • 2018-12-03popstate如何使用?总结popstate实例用法
  • 2018-12-03总结phonegap常用时间操作
  • 2018-12-03localstorage和sessionstorage使用记录
  • 2018-12-03检测浏览器是否支持html5视频的代码_html5教程技巧
  • 2017-08-06HTML5 History API 实现无刷新跳转
  • 2018-12-03使用HTML5的链接预取功能(link prefetching)给网站提速_html5教程技巧
  • 2018-12-03Html5画布的详细介绍
  • 2018-12-03怎样用 JavaScript 准确获取手机屏幕的宽度和高度?
  • 2018-12-03h5怎样实现获取用户地理定位

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 揭秘谷歌AMP项目:google amp是如何提高网页加载速度的?
    • 微信浏览器取消缓存的方法
    • html5中的Canvas 和 SVG分别是什么?它们的区别在何处?(实例)
    • HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧
    • HTML5 Canvas 起步(1) - 基本概念
    • HTML5开发中使用MVC模式
    • HTML5盒子模型的使用方法
    • HTML5能为我们带来什么? 面试必备!
    • 详解HTML5预测取代本地App将成为可能
    • 刚毕业html5工资一般是多少

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有