Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.