https://www.cnblogs.com/benbenfishfish/p/9674197.html
需要引用的庫請點擊附件下載 ↓
附件
源碼參考直接右鍵 :https://files.cnblogs.com/files/benbenfishfish/htmltortf.zip
html5調用手機本地攝像頭和相冊識別二維碼詳細實現過程(附源碼下載)
項目中有用到h5識別我們的單據,單據上面有二維碼. 實現的場景就是業務人員掃碼 類似以下場景
業務員拿到單據以后,直接可以掃碼進入相關單據業也可以 輸入二維碼下方的號碼進行識別
下面是h5的頁面構造(部分代碼參考國外網友編寫的)
@{
Layout = "~/Views/Shared/_MForm.cshtml";// 這里是weui的樣式 可以不用就是按鈕變丑了而已
}
<style type="text/css">
body {
width: 100%;
text-align: center;
}
img {
border: 0;
}
#main {
margin: 15px auto;
background: white;
overflow: auto;
width: 100%;
}
#mainbody {
background: white;
width: 100%;
display: none;
}
#footer {
background: white;
}
#v {
width: 320px;
height: 240px;
}
#qr-canvas {
display: none;
}
#qrfile {
width: 320px;
height: 240px;
}
#mp1 {
text-align: center;
font-size: 35px;
}
#imghelp {
position: relative;
left: 0px;
top: -160px;
z-index: 100;
font: 18px arial,sans-serif;
background: #f0f0f0;
margin-left: 35px;
margin-right: 35px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 20px;
}
.selector {
margin: 0;
padding: 0;
cursor: pointer;
margin-bottom: -5px;
}
#outdiv {
width: 320px;
height: 240px;
border: solid;
border-width: 3px 3px 3px 3px;
}
#result {
border: solid;
border-width: 1px 1px 1px 1px;
padding: 20px;
width: 70%;
}
.tsel {
padding: 0;
}
.fileinput-button {
position: relative;
display: none;
}
</style>
<script src="~/Content/scripts/weui/barcode/llqrcode.js"></script>
<script src="~/Content/scripts/weui/barcode/webqr.js"></script>
