With the rapid development of the Internet, QR code applications will become more and more. At the same time, many of them are just ordinary QR codes. Please pick up your hand and design this QR code. Below are some very good QR code designs.
The principle of QR code :
Two-dimensional barcodes/QR codes can be divided into stacked/row row 2D barcodes and matrix 2D barcodes. The stacked/row row two-dimensional barcode is stacked with one-dimensional 5 barcodes with multiple short lines; the matrix two-dimensional barcode is composed of matrix, and the corresponding element positions of the matrix are used to represent binary "1", "empty" means binary "0", and the arrangement of "point" and "empty" forms the code.
Recently I became interested in QR code. I studied the term qrcode generated here. It has high fault tolerance.
Data representation method
The dark module represents binary "1", and the light module represents binary "0".
Error correction ability
・L-level: approximately 7% of the data code words can be corrected
・M level: approximately 15% of the data code words can be corrected
・Q-level: approximately 25% of the data code words can be corrected
・H-level: About 30% of the data code words can be corrected
The above design perfectly utilizes the fault tolerance of qrcode, which is very nice and very creative! !
1.google interface
The code copy is as follows:
<?php
$urlToEncode="http://www.csd2n.net";//The URL to generate the QR code
generateQRfromGoogle($urlToEncode);
function generateQRfromGoogle($chl,$widhtHeight ='150',$EC_level='L',$margin='0')
{
$url = urlencode($url);
echo '<img src="http://chart.apis.google.com/chart?chs='.$widhtHeight.'x'.$widhtHeight.'&cht=qr&chld='.$EC_level.'|'.$margin.'&chl='.$chl.'" widhtHeight="'.$size.'" widhtHeight="'.$size.'"//Google API interface. If it fails, you can query the latest interface at Google URL.
}
?>
2..js code conversion to canvas (key point)
demo: http://hxend.com/jsqrcode/test/
The code copy is as follows:
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/142/gjxgxu0g/qrgen.min.js"></script>
<div id=qrcode></div>
<script type="text/javascript">
qrcode(document.getElementById('qrcode'),{
data:'http://geraldl.net'
});
</script>
3. Picture interface
The code copy is as follows:
<img src="http://qrcoder.sinaapp.com?t=hello world">
4. Demo http://hxend.com/jsqrcode/test/ code
The code copy is as follows:
<!doctype html>
<html>
<head>
<title>QRCode</title>
<script type="text/javascript" src="http://files.cnblogs.com/webers/qrcode-light.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/webers/qrgen.js"></script>
</head>
<body>
<div>
<h1>QR code generation</h1>
<div>
Image: <img id=qrimg src=//www.VeVB.COM/uploadfile/2014/1219/20141219081025437.png>
<label><input id=qrclearedges type=checkbox checked>Clean the edge</label>
</div>
<div><input id=fimg type=file></div>
<div>Text: <textarea id=qtext>http://www.btgoogle.com</textarea></div>
<div>Size: <input id=cellSize type=range min=2 max=10 value=6></div>
<table>
<tr>
<td rowspan=2>Effect:</td>
<td colspan=3><input id=cellEffect type=range min=-50 max=50 step=5 value=0></td>
</tr>
<tr id=cellEffectStops>
<td align=left><a href=# data=l>Liquid</a></td>
<td align=center><a href=# data=s>cube</a></td>
<td align=right><a href=# data=r>Circle</a></td>
</tr>
</table>
<div>
Foreground color: <input id=colorFore type=color value=#4169e1>
Background color: <input id=colorBack type=color value=#ffffff><br>
Outside-border color: <input id=colorOut type=color value=#cd5c5c>
Inside-border color: <input id=colorIn type=color value=#191970>
</div>
<button id=qrgen>generate</button>
</div>
<div id=qrcode></div>
<script src="http://files.cnblogs.com/webers/take.js"></script>
</body>
The above 4 methods are the third one, the simplest, the second one is recommended by me, with more freedom, please choose according to your needs.