Description
This is a cross platform jQuery library to create a QRcode reader for HTML5 compatible browser.
The decoder used for the QRcode reading is from LazarSoft https://github.com/LazarSoft/jsqrcode
Demo
See a demo here http://dwa012.github.io/html5-qrcode/
Usage
Include html5_qrcode.min.js in the lib directory.Create a basic <div> with a given width and height.
Presently width and height attributes must be set.
<div id="reader" style="width:300px;height:250px"></div>
Then call the html5_qrcode function on the div.
$('#reader').html5_qrcode(function(data){ // do something when code is read }, function(error){ //show read errors }, function(videoError){ //the video stream could be opened } );
It takes three callbacks: a readSuccess, readError, and videoLoadError. The readError wil be called quite often, it is really only useful for debugging.videoError is called if the HTML5 video stream cannot be opened.When you're done using the camera, call $('#reader').html5_qrcode_stop() to stop scanning for QR codes, close the stream, and relinquish permissions granted by the user.
(This will result in the "camera on" light on their device turning off)
项目地址：https://github.com/dwa012/html5-qrcode
另一个：
Include js libraries in your page where you want to decode qr codes.
<script type="text/javascript" src="llqrcode.js"></script>
<script type="text/javascript" src="webqr.js"></script>
HTML for page design
<html>
<head>
<!--C S S H E R E-->
</head>
<body οnlοad="load(); setimg();">
<div id="main">
<div id="mainbody">
<div id="outdiv">
</div>
<div id="result"></div>
</div></div>
<canvas id="qr-canvas" width="800" height="600"></canvas> <!--Canvas to draw image -->
</body>
</html>
CSS for styling
<style type="text/css">
body{
width:100%;
text-align:center;
}
#qrfile{
width:320px;
height:240px;
}
#qr-canvas{
display:none;
}
#outdiv
{
width:320px;
height:240px;
border: solid;
border-width: 1px 1px 1px 1px;
}
#result{
border: solid;
border-width: 1px 1px 1px 1px;
padding:20px;
width:37.3%;
}
#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;
}
p.helptext{
margin-top:54px;
font:18px arial,sans-serif;
}
p.helptext2{
margin-top:100px;
font:18px arial,sans-serif;
}
</style>
Hope you like this tutorial feel free to comment.