Recently i published a
tutorial on
How to Generate QR Code in PHP and many readers send emails to decode QR code, so I am writing this article to decode you QR code you have to
upload image of QR code and it will show you text inside that code image. This QR code decoder works on
HTML 5 file
API and canvas tag and used webqr library.
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<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>
|
0 comments:
Post a Comment