<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二维码解码</title>
</head>
<script src="index.aio.min.js"></script>
<style type="text/css">
.qrcode-box {
padding: 20px;
width: 1000px;
margin: 0 auto;
}
.qrcode-box .btn {
width: 160px;
height: 60px;
line-height: 60px;
font-size: 20px;
cursor: pointer;
font-weight: bold;
}
</style>
<body>
<div class="qrcode-box">
<h2>二维码解码</h2>
<input type="file" id="selectFile">
<br />
<br />
<hr />
<h2>二维码解码</h2>
<img src="./awm.png" />
<br />
<button class="btn" onclick="reqrcodeFn()">解码</button>
</div>
<script>
var qr = new QrcodeDecoder();
var selectFile = document.getElementById('selectFile');
var getObjectURL = function(file) {
return window.URL && window.URL.createObjectURL ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);
}
selectFile.onchange = function() {
console.log(getObjectURL(this.files[0]));
var code = qr.decodeFromImage(getObjectURL(this.files[0]))
alert("二维码解析：" + code.data);
window.open(code.data)
}
function reqrcodeFn() {
var awmUrl = 'https://qr.api.cli.im/newqr/create?data=https%3A%2F%2Fwww.ifrontend.net%2F&level=H&transparent=0&bgcolor=%23FFFFFF&forecolor=%23000000&blockpixel=12&marginblock=2&logourl=https%3A%2F%2Fncstatic.clewm.net%2Ffree%2F2020%2F1021%2F21%2F5efb033f1cd6d67693dbe30bdfc432a1.png&size=260&logoshape=rect&eye_use_fore=1&qrcode_eyes=null&outcolor=%23000000&incolor=%23000000&qr_rotate=0&text=&fontfamily=simsun.ttc&fontsize=30&fontcolor=%23000000&logo_pos=0&kid=bizcliim&time=1603288062&key=c5fc80f7ff604a85aff6131f78cf84bc';
var code2 = qr.decodeFromImage(awmUrl, {crossOrigin: "anonymous"})
alert("二维码解析：" + code2.data);
window.open(code2.data)
}
</script>
</body>
</html>
vue应用
<template>
<div class="qrcode">
<br /><br /><br /><br />
<h1>二维码解码</h1><br /><br /><br />
<input type="file" ref="referenceUpload" @change="fileChange" /><br />
<img :src="imgSrc" /><br /><br />
<button @click="decodeFn">解码</button>
</div>
</template>
<script>
import QrCode from 'qrcode-decoder'
export default {
data() {
return {
eventFile: '',
imgSrc: ''
}
},
methods: {
fileChange() {
const eventFile = this.$refs.referenceUpload.files[0]
const awmUrl = this.getObjectURL(eventFile)
this.imgSrc = awmUrl
this.eventFile = eventFile
},
getObjectURL(file) {
return window.URL && window.URL.createObjectURL ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file)
},
decodeFn() {
const qr = new QrCode()
qr.decodeFromImage(this.imgSrc).then(res => {
console.log(res.data)
alert('二维码解析：' + res.data)
window.open(res.data)
})
}
}
}
</script>
微信公众号搜索“前端开发那点事”
