transferred from: http://www.cnblogs.com/webers/p/4172313.html
With the rapid development and development of the network, the application of QR code will be more and more. At the same time a lot of just a very ordinary two-dimensional code, please pick up your hand to the two-dimensional code design it up. Here are a few very good QR code designs to share.
Two-dimensional code principle:
Two-dimensional barcode/Two-D code can be divided into stacked/row-type two-dimensional barcode and matrix two-dimensional barcode. Stacked/row-type two-dimensional barcode form is composed of a multi-line short-cut one-dimensional 5 code stack; matrix two-dimensional bar code in the form of a matrix, the corresponding elements of the matrix with a "point" for the binary "1", with "empty" means binary "0", "point" and "empty" arrangement of the code.
Recently, the two-dimensional code has been interested in the two-dimensional code generated here the term QRCode fault tolerance is higher.
Data representation method |
The Dark module represents the binary "1" and the light module represents the binary "0". |
Error correction capability |
· L-level: about 7% of the data code Word can be corrected |
· M-class: approx. 15% Data code Word Error |
· Q-level: About 25% of the data code Word can be corrected |
· H-Class: About 30% of the data code Word can be corrected |
The above design is perfect to take advantage of QRCode's fault tolerance, very nice and very creative!!
1.google interface
123456789 |
<?php
$urlToEncode=
"http://www.csd2n.net"
;//要生成二维码的网址
generateQRfromGoogle($urlToEncode);
function generateQRfromGoogle($chl,$widhtHeight =
‘150‘
,$EC_level=
‘L‘
,$margin=
‘0‘
)
{
$url = urlencode($url);
echo
‘ .$widhtHeight.
‘x‘
.$widhtHeight.
‘&cht=qr&chld=‘
.$EC_level.
‘|‘
.$margin.
‘&chl=‘
.$chl.
‘" alt="QR code" widhtHeight="‘
.$size.
‘" widhtHeight="‘
.$size.
‘"/>‘
;//Google API接口,若失效可到Google网址查询最新接口
}
?>
|
2..js code conversion to canvas (focus)
demo:http://hxend.com/jsqrcode/test/
1234567 |
<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. Image Interface
1 |
"http://qrcoder.sinaapp.com?t=hello world" >
|
4.demo inside http://hxend.com/jsqrcode/test/code
12345678910111213141516171819202122232425262728293031323334353637383940 |
<!doctype html>
<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>
<body>
<div>
<div>
图片: //hdimg.qiniudn.com/Uploads/141889425189.png>
<label><input id=qrclearedges type=checkbox checked>清理边缘</label>
</div>
<div><input id=fimg type=file></div>
<div>文本: <textarea id=qrtext>http:
//www.btgoogle.com</textarea></div>
<div>大小: <input id=cellSize type=range min=2 max=10 value=6></div>
<table>
<tr>
<td rowspan=2>效果:</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>液体</a></td>
<td align=center><a href=
# data=s>方块</a></td>
<td align=right><a href=
# data=r>圆</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>生成</button>
</div>
<div id=qrcode></div>
<script src=
"http://files.cnblogs.com/webers/take.js"
></script>
</body>
|
Look at me write so good demo and share such a good QR code design give me a recommendation. The demo Github:https://github.com/hxend/jsqrcode
4 ways to generate two-dimensional code (JS control canvas to draw a two-dimensional code)