读取二维码 How to decode QR code ( HTML5 QR Code Reader )
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 onload="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.
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...