HTML5 实现扫描识别二维码 生成二维码
1. 操作摄像头，获取图片。HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源。2. 利用canvas使用相关算法分析图片识别图片得出结果，可用jquery.qrcode分析二维码 。（技术点：getImageData）
·
扫描识别二维码
思路
1. 操作摄像头，获取图片。HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源。
2. 利用canvas使用相关算法分析图片识别图片得出结果，可用jquery.qrcode分析二维码 。（技术点：getImageData）
局限性
移动平台支持getUserMedia/Stream API的浏览器比较少，支持列表 http://caniuse.com/#feat=stream （目前没发现有IOS是支持的）
IOS替代方案笔记：
调用摄像头拍照，把图片传到h5页面。然后在解析。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!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 >
< 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 >
</ div >
</ div >
</ form >
< div data-role = "fieldcontain" >
< div id = "localImag" >
< img id = "preview" width = "-1" height = "-1" style = "display: none" />
</ div >
</ 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 >
|
代码实现
生成二维码
具体代码
测试用的二维码
qsa2015-08-08 CCID2212553
延伸阅读
一站式虚拟内容创作平台，激发创意，赋能创作，进入R空间，遇见同道，让优质作品闪耀发光。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)