-
Notifications
You must be signed in to change notification settings - Fork 7
/
demo.html
144 lines (128 loc) · 5 KB
/
demo.html
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<title>微信二维码引擎WebAssembly版在线demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #ffffff;
/* margin: 0px; */
}
a {
color: #0040ff;
}
</style>
<script type="text/javascript">
var launchDemo = () => {
document.querySelector('.demo').style.display = 'flex'
var wr = new cv.wechat_qrcode_WeChatQRCode(
"wechat_qrcode/detect.prototxt",
"wechat_qrcode/detect.caffemodel",
"wechat_qrcode/sr.prototxt",
"wechat_qrcode/sr.caffemodel"
)
const input = document.querySelector('#file-input')
const img = document.createElement('img')
input.style.display = 'block'
input.addEventListener('change', (e) => {
const [file] = e.target.files
if (!file) return;
const url = URL.createObjectURL(file)
img.src = url
})
img.addEventListener('load', (e) => {
const inputImg = cv.imread(img)
cv.imshow('preview-canvas', inputImg)
const out = new cv.MatVector()
const results = wr.detectAndDecode(inputImg, out)
let i = 0
let arr = []
while(i < results.size()) {
arr.push(results.get(i++))
}
results.delete()
const rects = []
let temp = inputImg
for(let j = 0; j < out.size(); j += 1) {
let rect = cv.boundingRect(out.get(j))
rects.push(rect)
let point1 = new cv.Point(rect.x, rect.y);
let point2 = new cv.Point(rect.x + rect.width, rect.y + rect.height);
let rectangleColor = new cv.Scalar(255, 0, 0);
cv.rectangle(temp, point1, point2, rectangleColor, 2, cv.LINE_AA, 0);
}
cv.imshow('preview-canvas', temp)
document.querySelector('.result-count').textContent = `检测到 ${arr.length} 个二维码`
document.querySelector('.result-list').innerHTML = arr.join('<br />')
})
img.src = './qrcode.png'
}
// Helper for opencv.js (see below)
var Module = {
preRun: [],
postRun: [] ,
onRuntimeInitialized: function() {
console.log("Emscripten runtime is ready");
if (window.cv instanceof Promise) {
window.cv.then((target) => {
window.cv = target;
//console.log(cv.getBuildInformation());
launchDemo()
})
}
},
print: (function() {
var element = document.getElementById('output');
if (element) element.value = ''; // clear browser cache
return function(text) {
console.log(text);
if (element) {
element.value += text + "\n";
element.scrollTop = element.scrollHeight; // focus on bottom
}
};
})(),
printErr: function(text) {
console.error(text);
},
setStatus: function(text) {
console.log(text);
},
totalDependencies: 0
};
Module.setStatus('Downloading...');
window.onerror = function(event) {
Module.setStatus('Exception thrown, see JavaScript console');
Module.setStatus = function(text) {
if (text) Module.printErr('[post-exception status] ' + text);
};
};
</script>
</head>
<body>
<br>
<div class="demo" style="display: none;flex-direction: column;align-items: center;">
<h1>微信二维码引擎WebAssembly版在线demo</h1>
<br>
<h3 style="min-width: 600px">输入: </h3>
<div class="preview-section">
<!-- <img alt="" id="file-img" style="width: 400px;height: auto"> -->
<canvas id="preview-canvas" style="max-width: 800px;max-height: 800px"></canvas>
<div class="qrcode-list"></div>
</div>
<br>
<input id="file-input" style="display: none" type="file" accept="image/*"/>
<br>
<div class="results" style="min-width: 600px">
<h3>结果: </h3>
<div class="result-count"></div>
<br>
<div class="result-list"></div>
</div>
</div>
<script src="wechat_qrcode_files.js"></script>
<script type="application/javascript" async src="opencv.js"></script>
</body>
</html>