How to use HTML5 to realize the function of QR Code scanning
This article introduces the knowledge of "how to use HTML5 to achieve QR code scanning function". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
# bcid {
Width:100%
Height:100%
Position:absolute
Background:#000000
}
Html,body,p {
Height:100%
Width:100%
}
.fbt {
Color:#0E76E1
Width:50%
Background-color:#ffffff
Float:left
Line-height:44px
Text-align:center
}
Item QR code scanning
Select a QR code from the album
cancel
Scan=null;// scan object
Mui.plusReady (function () {
Mui.init ()
StartRecognize ()
})
FunctionstartRecognize () {
Try {
Varfilter
/ / Custom scan control style
Varstyles= {frameColor: "# 29E52C", scanbarColor: "# 29E52C", background: ""}
/ / scan control construction
Scan=newplus.barcode.Barcode ('bcid',filter,styles)
Scan.onmarked=onmarked
Scan.onerror=onerror
Scan.start ()
/ / turn on and off flash processing
Varflag=false
Document.getElementById ("turnTheLight") .addEventListener ('tap',function () {
If (flag==false) {
Scan.setFlash (true)
Flag=true
} else {
Scan.setFlash (false)
Flag=false
}
})
} catch (e) {
Alert ("error:\ n" + e)
}
}
Functiononerror (e) {
Alert (e)
}
Functiononmarked (type,result) {
Vartext=''
Switch (type) {
Caseplus.barcode.QR:
Text='QR:'
Break
Caseplus.barcode.EAN13:
Text='EAN13:'
Break
Caseplus.barcode.EAN8:
Text='EAN8:'
Break
}
Alert (text+ ":" + result)
}
/ / Select a QR code picture from the album
FunctionscanPicture () {
Plus.gallery.pick (function (path) {
Plus.barcode.scan (path,onmarked,function (error) {
Plus.nativeUI.alert ("this picture is not recognized")
})
}, function (err) {
Plus.nativeUI.alert ("Failed:" + err.message)
})
}
III. Problems encountered in the process of doing
AQuery p occupies the whole page
1, the width and height of this p is 100%, so is the height of the parent element (up to the root node, and so on), or the position of this p is absolute
2. You can use js to dynamically set the width and height of the page
Varheight=window.innerHeight+'px';// gets the actual height of the page
Varwidth=window.innerWidth+'px'
Document.getElementById ("bcid"). Style.height=height
Document.getElementById ("bcid"). Style.width=width
B, the scan control has upper and lower margins
This is the end of the content of "how to use HTML5 to achieve QR code scanning function". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
