HTML5 实现扫描识别二维码 生成二维码
扫描识别二维码
思路
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
|
<
html
>
<
head
>
<
title
>上传图片
<
meta
charset
=
"utf-8"
>
<
body
>
<
iframe
name
=
"uploadfrm"
id
=
"uploadfrm"
style
=
"display: none;"
>
<
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
id
=
"DivUp"
style
=
"display: none"
>
<
input
type
=
"submit"
data-inline
=
"true"
id
=
"BtnUp"
value
=
"确认上传"
data-mini
=
"true"
/>
<
div
data-role
=
"fieldcontain"
>
<
div
id
=
"localImag"
>
<
img
id
=
"preview"
width
=
"-1"
height
=
"-1"
style
=
"display: none"
/>
<
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
}
|
感谢github，有现成的算法
1. https://github.com/LazarSoft/jsqrcode
2. https://github.com/dwa012/html5-qrcode
具体实现代码：
链接： http://pan.baidu.com/s/1ntH1le5
密码：7cic
生成二维码
感谢github
1. https://github.com/LIGuoxiang/QRCode
链接： http://pan.baidu.com/s/1kT8HHH1
密码：6byh
测试用的二维码
qsa2015-08-08 CCID2212553
延伸阅读
iOS 8版Safari可利用摄像头扫描录入信用卡号