@shencom/wechat-opencv
Version:
142 lines (121 loc) • 4.32 kB
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'
const cv = window.__cv__;
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')
img.setAttribute('crossorigin', 'anonymous')
input.style.display = 'block'
input.addEventListener('change', (e) => {
const [file] = e.target.files
if (!file) return;
const url = URL.createObjectURL(file)
console.log('%c [url]-35', 'font-size:13px; background:#336699; color:#fff;', url);
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} 个二维码`
console.log('%c [arr.length]-68', 'font-size:13px; background:#336699; color:#fff;', arr);
document.querySelector('.result-list').innerHTML = arr.join('<br />')
})
// img.src = './qrcode.png'
}
// Helper for opencv.js (see below)
var __Module__ = {
preRun: [],
postRun: [],
print: console.log,
printErr: console.error,
setStatus: console.log,
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: () => { },
totalDependencies: 0
};
window.__Module__ = __Module__
__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 crossorigin="anonymous" src="wechat_qrcode_files.js"></script>
<script type="application/javascript" async crossorigin="anonymous"
src="opencv.js"></script>
</body>
</html>