扫描识别二维码

思路

1. 操作摄像头，获取图片。HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源。

2. 利用canvas使用相关算法分析图片识别图片得出结果，可用jquery.qrcode分析二维码。（技术点：getImageData）

局限性

移动平台支持getUserMedia/Stream API的浏览器比较少，支持列表 http://caniuse.com/#feat=stream （目前没发现有IOS是支持的）

IOS替代方案笔记：

调用摄像头拍照，把图片传到h5页面。然后在解析。

<!DOCTYPE HTML>

< html >

< head >

< title >上传图片</ title >

< meta charset = "utf-8" >

</ head >

< body >

< iframe name = "uploadfrm" id = "uploadfrm" style = "display: none;" ></ iframe >

< form name = "formHead" method = "post" action = "" id = "formHead" enctype = "multipart/form-data" target = "uploadfrm" >

< div >

< input type = "file" name = "file_head" id = "file_head" onchange = "javascript:setImagePreview();" />

</ div >

< div >

< div id = "DivUp" style = "display: none" >

< input type = "submit" data-inline = "true" id = "BtnUp" value = "确认上传" data-mini = "true" />

</ div >

</ form >

< div data-role = "fieldcontain" >

< div id = "localImag" >

< img id = "preview" width = "-1" height = "-1" style = "display: none" />

</ div >

< script type = "text/javascript" >

function setImagePreview() {

var preview, img_txt, localImag, file_head = document.getElementById("file_head"),

picture = file_head.value;

if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),

!1;

if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",

preview.style.width = "63px",

preview.style.height = "63px",

preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);

else {

file_head.select(),

file_head.blur(),

img_txt = document.selection.createRange().text,

localImag = document.getElementById("localImag"),

localImag.style.width = "63px",

localImag.style.height = "63px";

try {

localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",

localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt

} catch(f) {

return alert("您上传的图片格式不正确，请重新选择！"),

!1

}

preview.style.display = "none",

document.selection.empty()

}

return document.getElementById("DivUp").style.display = "block",

!0

}

</ script >

</ body >

</ html >

代码实现

1. https://github.com/suzhida/demo-html5-qrcode

生成二维码

具体代码

1. https://github.com/suzhida/QRCode

测试用的二维码

qsa2015-08-08 CCID2212553

HTML5 实现扫描识别二维码生成二维码相关推荐

2维照片生成3维模型_如何使用2维模型跟踪状态
2维照片生成3维模型 Application databases are generally designed to only track current state. For example, a ...
HTML5实现扫描识别二维码/生成二维码
扫描识别二维码思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源. 2. 利用canvas使用相关算法分析图片识别图 ...
iOS-长按识别二维码/生成二维码/扫描二维码
参考:http://www.jianshu.com/p/997cec333822 参考:https://github.com/nglszs/BCQRcode 方式一:长按识别二维码 #import & ...
iOS中扫描二维码/生成二维码详解
最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 指示根视图: ? 1 self.window.rootViewController = [[UINav ...
【Unity】在Unity中实现扫描二维码生成二维码功能
在Unity中使用二维码扫描功能需要我们在Unty中导入扫描库下载地址:https://github.com/micjahn/ZXing.Net/releases 然后编写扫描脚本: 先在脚本上添加 ...
扫描二维码生成二维码
1.导入依赖 allprojects {repositories {google()jcenter()maven {url 'https://jitpack.io'}} } implementatio ...
视频怎么做成二维码扫描展示？在线视频生成二维码的技巧
现在很多二维码在扫描的时候,可以展现出视频的内容,那么视频转二维码(https://www.jzx.com/media)是如何操作的呢?其实方法很简单,通过电脑浏览器来操作在线二维码生成器工具,就可以 ...
iOS二维码生成及扫码
概要现在越来越多的应用加入二维码相关的业务,在iOS开发市场上很多开发人员都在使用第三方的扫码与生成二维码的控件,个人认为此类的第三方控件识别度不高.最近正好整理新框架的事情,研究了一下.具体代码如 ...
Android用Zxing扫二维码/生成二维码功能
新年已过,一切恢复真正常,新的一年给自己几句指引: 光努力还不行,方向很重要. 总是想着最坏的结果,就会让人失去改变的勇气. 你当然有权利选择自己的人生--但只有在你真正强大后,逆行的阻力才会降到最小 ...

HTML5 实现扫描识别二维码生成二维码

扫描识别二维码

生成二维码

HTML5 实现扫描识别二维码生成二维码相关推荐

最新文章

热门文章

HTML5 实现扫描识别二维码 生成二维码

扫描识别二维码

生成二维码

HTML5 实现扫描识别二维码 生成二维码相关推荐

最新文章

热门文章

HTML5 实现扫描识别二维码生成二维码

HTML5 实现扫描识别二维码生成二维码相关推荐