Google的 Chrome实验室 收 集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目，里面的例子都很独特，让人惊叹。我从未想过结合 HTML…
May 28, 2015
读取二维码 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.
Demo : http://demo.phpgang.com/decode-qr-code/
更多参考
生成二维码的 jQuery 插件：jquery.qrcode.js
在web页面上快速生成二维码的两种实用方法 (javascript/php)
本文: 读取二维码 How to decode QR code ( HTML5 QR Code Reader )
Related Posts
JavaScript: 通过十六进制代码检索颜色名, How to retrieve the human name of a color by its hex code in JavaScript
jQuery contains大小写不敏感, Make jQuery :contains Case-Insensitive
jQuery：实现简单table 排序, table sort
About Author
