Skip to content

Q
QRCode

csdou / QRCode
与 Fork 源项目一致

Fork自 yu5025 / QRCode

通知 1
Star 0
Fork 0
Q
QRCode

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 6665acbe 编写于 作者: MuGuiLin's avatar MuGuiLin 🏡
浏览文件
操作

update

上级 28eb2932
展开全部 隐藏空白更改
内联 并排
Showing with 313 addition and 49019 deletion
HtmlQRCode/js/base.js
浏览文件 @ 6665acbe
......@@ -97,7 +97,7 @@
}).catch(error => {
this.cance();
alert('对不起：未识别到扫描设备!');
// console.error(error.name + "：" + error.message + "，" + error.constraint);
// console.error(error.code + "：" + error.name + "，" + error.message);
});
} else if (navigator.getUserMedia) {
navigator.getUserMedia({
......@@ -113,7 +113,7 @@
}, (error) => {
this.cance();
alert('对不起：未识别到扫描设备!');
// console.error(error.name + "：" + error.message + "，" + error.constraint);
// console.error(error.code + "：" + error.name + "，" + error.message);
});
} else {
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
......
VueQRCode/src/router/index.js
浏览文件 @ 6665acbe
......@@ -21,7 +21,7 @@ const routes = [
]
const router = new VueRouter({
mode: 'history',
mode: 'hash', // history
base: process.env.BASE_URL,
routes
})
......
VueQRCode/src/views/Reader.vue
浏览文件 @ 6665acbe
......@@ -66,6 +66,14 @@ export default {
this.canvas.stroke();
},
cance() {
this.isAnimation = false;
cancelAnimationFrame(this.timer);
setTimeout(() => {
this.cvsele.style.display = "none";
}, 1000);
},
sweep() {
if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
const { videoWidth, videoHeight } = this.video;
......@@ -87,12 +95,8 @@ export default {
if (this.result != obj.data) {
this.audio.play();
this.result = obj.data;
this.isAnimation = false;
cancelAnimationFrame(this.timer);
this.cance();
console.info("识别结果：", obj.data);
setTimeout(() => {
this.cvsele.style.display = "none";
}, 1000);
}
} else {
console.error("识别失败，请检查二维码是否正确！");
......@@ -111,36 +115,27 @@ export default {
media() {
this.isAnimation = true;
this.cvsele.style.display = "block";
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.mediaDevices) {
navigator.mediaDevices
.getUserMedia({
video: { facingMode: "environment" },
})
.then((stream) => {
this.video.srcObject = stream;
this.video.setAttribute("playsinline", true);
this.video.setAttribute("webkit-playsinline", true);
this.video.addEventListener("loadedmetadata", () => {
this.video.play();
this.sweep();
});
})
.catch((error) => {
console.error(
error.name + "：" + error.message + "，" + error.constraint
);
navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" },
}).then((stream) => {
this.video.srcObject = stream;
this.video.setAttribute("playsinline", true);
this.video.setAttribute("webkit-playsinline", true);
this.video.addEventListener("loadedmetadata", () => {
this.video.play();
this.sweep();
});
}).catch((error) => {
this.cance();
alert('对不起：未识别到扫描设备!');
console.log(error.code + "：" + error.name + "，" + error.message);
});
} else if (navigator.getUserMedia) {
navigator.getUserMedia(
{
navigator.getUserMedia({
video: { facingMode: "environment" },
},
(stream) => {
}, (stream) => {
this.video.srcObject = stream;
this.video.setAttribute("playsinline", true);
this.video.setAttribute("webkit-playsinline", true);
......@@ -148,58 +143,48 @@ export default {
this.video.play();
this.sweep();
});
},
(error) => {
console.error(
error.name + "：" + error.message + "，" + error.constraint
);
}, (error) => {
this.cance();
alert('对不起：未识别到扫描设备!');
console.log(error.code + "：" + error.name + "，" + error.message);
}
);
} else {
if (
navigator.userAgent.toLowerCase().match(/chrome/) &&
location.origin.indexOf("https://") < 0
) {
console.error(
"获取浏览器录音功能，因安全性问题，需要在localhost 或 127.0.0.1 或 https 下才能获取权限！"
);
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf("https://") < 0 ) {
console.log("获取浏览器录音功能，因安全性问题，需要在localhost 或 127.0.0.1 或 https 下才能获取权限！");
} else {
this.cance();
alert("对不起：未识别到扫描设备!");
}
}
},
upload(e) {
this.cance();
const file = e.target.files[0];
const createObjectURL =
window.createObjectURL ||
window.URL.createObjectURL ||
window.webkitURL.createObjectUR;
const createObjectURL = window.createObjectURL || window.URL.createObjectURL || window.webkitURL.createObjectUR;
this.result = "";
this.imgurl = createObjectURL(file);
const fReader = new FileReader();
fReader.readAsDataURL(file); // Base64 8Bit字节码
fReader.readAsDataURL(file); // Base64 8Bit字节码
// fReader.readAsBinaryString(file); // Binary 原始二进制
// fReader.readAsArrayBuffer(file); // ArrayBuffer 文件流
fReader.onload = (e) => {
this.imgurl2 = e.target.result;
e.target.result && Jimp.read(e.target.result).then(async (res) => {
const { data, width, height } = res.bitmap;
try {
const resolve = await jsQR(data, width, height);
this.result = resolve.data;
console.info("识别结果：", resolve.data);
} catch (err) {
this.result = "识别失败，请检查二维码是否正确！";
console.error("识别失败，请检查二维码是否正确！", err);
} finally {
console.info("读取到的文件：", res);
}
})
.catch((err) => {
console.error("文件读取错误：", err);
});
const { data, width, height } = res.bitmap;
try {
const resolve = await jsQR(data, width, height);
this.result = resolve.data;
} catch (err) {
this.result = "识别失败，请检查二维码是否正确！";
} finally {
console.info("读取到的文件：", res);
}
}).catch((err) => {
console.error("文件读取错误：", err);
});
};
},
},
......
css/about.895473a2.css 0 → 100644
浏览文件 @ 6665acbe
.reader{font-size:16px}.reader .sweep{position:relative;margin:20px;padding:12px;width:300px;font-size:18px;cursor:pointer;color:#fff;background:#42b983;border:1px solid #42b983;overflow:hidden}.reader .sweep input{position:absolute;font-size:100px;opacity:0}.reader .imgurl{margin:20px;text-align:center}.reader .imgurl img{margin:20px;width:280px;height:260px}.reader .imgurl img,.reader .result{padding:10px;border:1px solid grey;border-radius:8px}.reader .result{box-sizing:border-box;font-size:16px}.reader .canvas{display:none;box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh}
\ No newline at end of file
css/app.b3880e9e.css 0 → 100644
浏览文件 @ 6665acbe
#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}#nav{padding:30px;font-size:18px}#nav a{padding:10px;font-weight:700;color:#2c3e50}#nav a.router-link-exact-active{color:#42b983}.qrcode .form{margin:30px}.qrcode .form input{padding:0 10px;width:360px;height:46px;font-size:18px}.qrcode .form button{width:150px;height:50px;font-size:18px;vertical-align:top;background:#42b983;border:1px solid #767676;border-left:none}.qrcode .form button a{color:#fff;text-decoration:none}.qrcode .code{margin:auto;padding:8px;width:360px;height:360px;border-radius:8px;border:2px solid grey}
\ No newline at end of file
css/base.css 已删除 100644 → 0
浏览文件 @ 28eb2932
* {
margin : 0;
padding: 0;
}
.h1 {
padding : 10px;
text-align: center;
}
.menu {
text-align: center;
}
.menu nav {
display : inline-block;
padding : 20px;
font-size : 20px;
font-weight: bold;
cursor : pointer;
}
.menu nav.active {
color: #42b983;
}
.main {
position: relative;
z-index : 1;
}
.main .create {
text-align: center;
}
.main .create input {
position : relative;
margin : 20px 0;
padding : 12px;
width : 300px;
font-size: 18px;
border : 1px solid #42b983;
overflow: hidden;
}
.main .create input[type="button"] {
color : white;
border : none;
background: #42b983;
cursor : pointer;
}
.main .create .qrcode img {
margin : 20px auto;
padding : 30px;
width : 360px;
height : 360px;
border-radius: 8px;
border : 2px solid gray;
}
.main .reader {
display : none;
text-align: center;
font-size : 16px;
}
.main .reader .sweep {
position : relative;
margin : 20px;
padding : 12px;
width : 300px;
font-size : 18px;
cursor : pointer;
color : white;
background: #42b983;
border : 1px solid #42b983;
overflow : hidden;
}
.main .reader .sweep input {
position : absolute;
font-size: 100px;
opacity : 0;
}
.main .reader .imgurl {
margin : 20px;
text-align: center;
}
.main .reader .imgurl img {
margin : 20px;
padding : 10px;
border : 1px solid gray;
border-radius: 8px;
width : 280px;
height : 260px;
}
.main .reader .result {
box-sizing : border-box;
padding : 10px;
border : 1px solid gray;
border-radius: 8px;
font-size : 16px;
}
.main .reader .canvas {
display : none;
box-sizing: border-box;
position : fixed;
top : 0;
right : 0;
bottom : 0;
left : 0;
width : 100vw;
height : 100vh;
}
\ No newline at end of file
index.html
浏览文件 @ 6665acbe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维码：生成、扫描、识别</title>
<link rel="stylesheet" href="./css/base.css" />
<script async src="//hm.baidu.com/hm.js?29d14c9fb6158fcbec79d1a0d1425404"></script>
</head>
<body>
<menu class="menu" id="menu">
<nav class="active">二维码生成</nav> |
<nav>二维码识别</nav>
</menu>
<h1 class="h1">纯前端 JS ：二维码：生成、扫描、识别 (HTML版)</h1>
<hr />
<main class="main">
<aside class="create">
<input type="text" id="code" value="http://www.muguilin.com" placeholder="请在这里输入要生成的内容！" />
<input type="button" value="生成" onclick="create()" />
<div class="qrcode" id="qrcode"></div>
</aside>
<aside class="reader">
<button class="sweep" onclick="sweep()">扫一扫</button>
<button class="sweep">
<input type="file" id="file" onchange="upload()" />从相册选择
</button>
<div class="imgurl">
<img id="imgurl"
src="https://raw.githubusercontent.com/MuGuiLin/QRCode/master/VueQRCode/src/assets/github.com.png"
alt="当前识别的二维码" />
</div>
<textarea class="result" id="result" cols="32" rows="6" placeholder="二维码识别结果！"></textarea>
<canvas class="canvas" id="canvas"></canvas>
</aside>
</main>
<!-- 二维码生成 -->
<script src="./js/qrcode.js"></script>
<script>
const text = document.querySelector('#code');
const qrcode = new QRCode(document.querySelector('#qrcode'), {
text: "http://www.muguilin.com",
width: 300,
height: 300,
colorDark: "blue",
colorLight: "white",
correctLevel: QRCode.CorrectLevel.H
});
// 生成
function create() {
qrcode.clear();
qrcode.makeCode(text.value);
};
</script>
<!-- 二维码识别 -->
<script src="./js/jimp.js"></script>
<script src="./js/jsqr.min.js"></script>
<script src="./js/base.js"></script>
<script>
const result = document.querySelector('#result');
const QrCode = new QrCodeRecognition({
sweepId: '#canvas',
uploadId: '#file',
error: function (err) {
// 识别错误反馈
result.value = err;
},
seuccess: function (res) {
// 识别成功反馈
result.value = res.data;
}
});
// 扫一扫
function sweep() {
result.value = '';
QrCode.sweep();
};
// 从相册选择
function upload() {
result.value = '';
QrCode.upload();
};
</script>
<!-- Demo页面交互 -->
<script>
const menu = [...document.querySelectorAll('nav')];
const aside = [...document.querySelectorAll('aside')];
menu.forEach((nav, n) => {
nav.onclick = () => {
aside.forEach((ele, a) => {
ele.style.display = 'none';
menu[a].classList.remove('active');
});
menu[n].classList.add('active');
aside[n].style.display = 'block';
}
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>qrcode</title><link href="css/about.895473a2.css" rel="prefetch"><link href="js/about.bca452a7.js" rel="prefetch"><link href="css/app.b3880e9e.css" rel="preload" as="style"><link href="js/app.c452888d.js" rel="preload" as="script"><link href="js/chunk-vendors.e9de5715.js" rel="preload" as="script"><link href="css/app.b3880e9e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but qrcode doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.e9de5715.js"></script><script src="js/app.c452888d.js"></script></body></html>
\ No newline at end of file
js/about.bca452a7.js 0 → 100644
浏览文件 @ 6665acbe
此差异已折叠。
js/app.c452888d.js 0 → 100644
浏览文件 @ 6665acbe
(function(e){function t(t){for(var o,n,c=t[0],i=t[1],l=t[2],s=0,d=[];s<c.length;s++)n=c[s],Object.prototype.hasOwnProperty.call(a,n)&&a[n]&&d.push(a[n][0]),a[n]=0;for(o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o]);f&&f(t);while(d.length)d.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],o=!0,n=1;n<r.length;n++){var c=r[n];0!==a[c]&&(o=!1)}o&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var o={},n={app:0},a={app:0},u=[];function c(e){return i.p+"js/"+({about:"about"}[e]||e)+"."+{about:"bca452a7"}[e]+".js"}function i(t){if(o[t])return o[t].exports;var r=o[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[],r={about:1};n[e]?t.push(n[e]):0!==n[e]&&r[e]&&t.push(n[e]=new Promise((function(t,r){for(var o="css/"+({about:"about"}[e]||e)+"."+{about:"895473a2"}[e]+".css",a=i.p+o,u=document.getElementsByTagName("link"),c=0;c<u.length;c++){var l=u[c],s=l.getAttribute("data-href")||l.getAttribute("href");if("stylesheet"===l.rel&&(s===o||s===a))return t()}var d=document.getElementsByTagName("style");for(c=0;c<d.length;c++){l=d[c],s=l.getAttribute("data-href");if(s===o||s===a)return t()}var f=document.createElement("link");f.rel="stylesheet",f.type="text/css",f.onload=t,f.onerror=function(t){var o=t&&t.target&&t.target.src||a,u=new Error("Loading CSS chunk "+e+" failed.\n("+o+")");u.code="CSS_CHUNK_LOAD_FAILED",u.request=o,delete n[e],f.parentNode.removeChild(f),r(u)},f.href=a;var p=document.getElementsByTagName("head")[0];p.appendChild(f)})).then((function(){n[e]=0})));var o=a[e];if(0!==o)if(o)t.push(o[2]);else{var u=new Promise((function(t,r){o=a[e]=[t,r]}));t.push(o[2]=u);var l,s=document.createElement("script");s.charset="utf-8",s.timeout=120,i.nc&&s.setAttribute("nonce",i.nc),s.src=c(e);var d=new Error;l=function(t){s.onerror=s.onload=null,clearTimeout(f);var r=a[e];if(0!==r){if(r){var o=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;d.message="Loading chunk "+e+" failed.\n("+o+": "+n+")",d.name="ChunkLoadError",d.type=o,d.request=n,r[1](d)}a[e]=void 0}};var f=setTimeout((function(){l({type:"timeout",target:s})}),12e4);s.onerror=s.onload=l,document.head.appendChild(s)}return Promise.all(t)},i.m=e,i.c=o,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(r,o,function(t){return e[t]}.bind(null,o));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i.oe=function(e){throw console.error(e),e};var l=window["webpackJsonp"]=window["webpackJsonp"]||[],s=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var f=s;u.push([0,"chunk-vendors"]),r()})({0:function(e,t,r){e.exports=r("56d7")},2395:function(e,t,r){},"520a":function(e,t,r){},"56d7":function(e,t,r){"use strict";r.r(t);r("e623"),r("e379"),r("5dc8"),r("37e1");var o=r("2b0e"),n=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{attrs:{id:"app"}},[r("div",{attrs:{id:"nav"}},[r("router-link",{attrs:{to:"/"}},[e._v("二维码生成")]),e._v(" | "),r("router-link",{attrs:{to:"/reader"}},[e._v("二维码识别")])],1),r("router-view")],1)},a=[],u=(r("7c55"),r("2877")),c={},i=Object(u["a"])(c,n,a,!1,null,null,null),l=i.exports,s=(r("d3b7"),r("3ca3"),r("ddb0"),r("8c4f")),d=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("main",{staticClass:"qrcode"},[r("h1",[e._v("二维码 生成、渲染！(Vue.js版)")]),r("hr"),r("div",{staticClass:"form"},[r("input",{directives:[{name:"model",rawName:"v-model",value:e.text,expression:"text"}],attrs:{type:"text",placeholder:"请在这里输入要生成的内容！"},domProps:{value:e.text},on:{input:function(t){t.target.composing||(e.text=t.target.value)}}}),r("button",[r("a",{attrs:{href:e.href,target:"_blank",download:"下载的二维码",rel:"noopener noreferrer"}},[e._v(" 下载二维码")])])]),r("div",{ref:"code",staticClass:"code"},[r("vue-qr",{attrs:{qid:"qrid",text:e.text,size:e.size,bgSrc:e.bgSrc,logoSrc:e.logoSrc,callback:e.callBack,logoScale:e.logoScale,colorDark:e.colorDark,colorLight:e.colorLight,backgroundColor:e.backgroundColor}})],1)])},f=[],p=r("658f"),h=r.n(p),g={name:"Qrcode",components:{VueQr:h.a},data:function(){return{href:"",text:"https://github.com/MuGuiLin",size:360,bgSrc:"",logoSrc:"https://raw.githubusercontent.com/MuGuiLin/QRCode/master/VueQRCode/src/assets/logo.png",margin:0,colorDark:"blue",colorLight:"#42B983",backgroundColor:"#EEE",logoScale:.15,dotScale:.35}},methods:{callBack:function(e,t){this.href=e,console.log(e,t)}}},m=g,v=(r("7076"),Object(u["a"])(m,d,f,!1,null,null,null)),b=v.exports;o["a"].use(s["a"]);var y=[{path:"/",name:"Qrcode",component:b},{path:"/reader",name:"Reader",component:function(){return r.e("about").then(r.bind(null,"968f"))}}],w=new s["a"]({mode:"hash",base:"",routes:y}),k=w,S=r("2f62");o["a"].use(S["a"]);var _=new S["a"].Store({state:{},mutations:{},actions:{},modules:{}});o["a"].config.productionTip=!1,new o["a"]({router:k,store:_,render:function(e){return e(l)}}).$mount("#app")},7076:function(e,t,r){"use strict";r("520a")},"7c55":function(e,t,r){"use strict";r("2395")}});
//# sourceMappingURL=app.c452888d.js.map
\ No newline at end of file
js/base.js 已删除 100644 → 0
浏览文件 @ 28eb2932
; (function (window, QrCodeRecognition) {
"use strict";
if (typeof define === 'function' && define.amd) {
define(QrCodeRecognition());
} else if (typeof exports === 'object') {
module.exports = QrCodeRecognition();
} else {
window.QrCodeRecognition = QrCodeRecognition();
};
}(typeof window !== "undefined" ? window : this, () => {
"use strict";
return class QrCodeRecognition {
constructor(opts = {}) {
this.timer = null;
this.result = "";
this.isAnimation = true;
this.lineWidth = opts.borderWidth || 3;
this.strokeStyle = opts.lineColor || 'red';
this.audio = new Audio(opts.audio || './js/tone.mp3');
this.video = document.createElement('video');
this.file = document.querySelector(opts.uploadId);
this.cvsele = document.querySelector(opts.sweepId);
this.canvas = this.cvsele.getContext('2d');
this.seuccess = opts.seuccess || Function;
this.error = opts.error || Function;
};
draw(begin, end) {
this.canvas.beginPath();
this.canvas.moveTo(begin.x, begin.y);
this.canvas.lineTo(end.x, end.y);
this.canvas.lineWidth = this.lineWidth;
this.canvas.strokeStyle = this.strokeStyle;
this.canvas.stroke();
};
cance() {
this.isAnimation = false;
cancelAnimationFrame(this.timer);
setTimeout(() => {
this.cvsele.style.display = "none";
}, 1000);
};
untie() {
if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
const { videoWidth, videoHeight } = this.video;
this.cvsele.width = videoWidth;
this.cvsele.height = videoHeight;
this.canvas.drawImage(this.video, 0, 0, videoWidth, videoHeight);
try {
const img = this.canvas.getImageData(0, 0, videoWidth, videoHeight);
document.querySelector('#imgurl').src = img;
const obj = jsQR(img.data, img.width, img.height, { inversionAttempts: 'dontInvert' });
if (obj) {
const loc = obj.location;
this.draw(loc.topLeftCorner, loc.topRightCorner);
this.draw(loc.topRightCorner, loc.bottomRightCorner);
this.draw(loc.bottomRightCorner, loc.bottomLeftCorner);
this.draw(loc.bottomLeftCorner, loc.topLeftCorner);
if (this.result != obj.data) {
this.audio.play();
this.cance();
this.seuccess(obj);
}
} else {
this.error("识别失败，请检查二维码是否正确！");
}
} catch (err) {
this.error("识别失败，请检查二维码是否正确！", err);
};
};
if (this.isAnimation) {
this.timer = requestAnimationFrame(() => {
this.untie();
});
}
};
sweep() {
this.isAnimation = true;
this.cvsele.style.display = "block";
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.mediaDevices) {
navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" }
}).then(stream => {
this.video.srcObject = stream;
this.video.setAttribute('playsinline', true);
this.video.setAttribute('webkit-playsinline', true);
this.video.addEventListener('loadedmetadata', () => {
this.video.play();
this.untie();
});
}).catch(error => {
this.cance();
alert('对不起：未识别到扫描设备!');
// console.error(error.name + "：" + error.message + "，" + error.constraint);
});
} else if (navigator.getUserMedia) {
navigator.getUserMedia({
video: { facingMode: "environment" }
}, (stream) => {
this.video.srcObject = stream;
this.video.setAttribute('playsinline', true);
this.video.setAttribute('webkit-playsinline', true);
this.video.addEventListener('loadedmetadata', () => {
this.video.play();
this.untie();
});
}, (error) => {
this.cance();
alert('对不起：未识别到扫描设备!');
// console.error(error.name + "：" + error.message + "，" + error.constraint);
});
} else {
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
console.error('获取浏览器录音功能，因安全性问题，需要在localhost 或 127.0.0.1 或 https 下才能获取权限！');
} else {
this.cance();
alert('对不起：未识别到扫描设备!');
}
};
};
upload() {
this.cance();
const file = this.file.files[0];
const createObjectURL = window.createObjectURL || window.URL.createObjectURL || window.webkitURL.createObjectUR;
const fReader = new FileReader();
fReader.readAsDataURL(file); // Base64 8Bit字节码
// fReader.readAsBinaryString(file); // Binary 原始二进制
// fReader.readAsArrayBuffer(file); // ArrayBuffer 文件流
fReader.onload = (e) => {
document.querySelector('#imgurl').src = e.target.result || createObjectURL(file);
e.target.result && Jimp.read(e.target.result).then(async (res) => {
const { data, width, height } = res.bitmap;
try {
const resolve = await jsQR(data, width, height);
this.audio.play();
this.seuccess(resolve);
} catch (err) {
this.error("识别失败，请检查二维码是否正确！", err);
} finally {
console.info("读取到的文件：", res);
}
}).catch((err) => {
this.error("文件读取错误：", err);
});
};
};
};
}));
\ No newline at end of file
js/chunk-vendors.e9de5715.js 0 → 100644
浏览文件 @ 6665acbe
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
js/jimp.js 已删除 100644 → 0
浏览文件 @ 28eb2932
此差异已折叠。
js/jsqr.min.js 已删除 100644 → 0
浏览文件 @ 28eb2932
此差异已折叠。
js/qrcode.js 已删除 100644 → 0
浏览文件 @ 28eb2932
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或