4种方法生成二维码 （js 控制canvas 画出 二维码）
Posted Lonely existence, lonely burni
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4种方法生成二维码 （js 控制canvas 画出 二维码）相关的知识，希望对你有一定的参考价值。
转自：http://www.cnblogs.com/webers/p/4172313.html
随着网络的迅速发展 发展 发展，二维码的应用将会越来越多。同时很多只是很平凡的二维码，请拿起你的手 把这个二维码 设计起来吧。下面分享了几个非常好的二维码设计。
二维码原理：
二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维5条码堆叠而成；矩阵式二维条码以矩阵的形式组成，在矩阵相应元素位置上用“点”表示二进制“1”， 用“空”表示二进制“0”，“点”和“空”的排列组成代码。
最近对二维码产生了兴趣 研究了一下二维码 这里生出的术语 qrcode 容错性较高。
|
数据表示方法
|
深色模块表示二进制“1”，浅色模块表示二进制“0”。
|
|
纠错能力
|
· L级：约可纠错7%的数据码字
|
|
· M级：约可纠错15%的数据码字
|
|
|
· Q级：约可纠错25%的数据码字
|
|
|
· H级：约可纠错30%的数据码字
|
上面的设计 就很完美的利用了 qrcode的容错性，非常nice 也非常有创意！！
1.google 接口
|
1
2
3
4
5
6
7
8
9
|
<?php $urlToEncode="http://www.csd2n.net";//要生成二维码的网址 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.\'" alt="QR code" widhtHeight="\'.$size.\'" widhtHeight="\'.$size.\'"/>\';//Google API接口，若失效可到Google网址查询最新接口 } ?> |
2..js代码 转换为 canvas （重点）
|
1
2
3
4
5
6
7
|
<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. 图片接口
|
1
|
<img src="http://qrcoder.sinaapp.com?t=hello world"> |
4.demo 里面http://hxend.com/jsqrcode/test/ 代码
|
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
|
<!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>二维码生成</h1> <div> 图片: <img id=qrimg src=http://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></html> |
看在我写这么好的demo 和 分享这么好的二维码设计 给我一个推荐吧。该demo github:https://github.com/Hxend/jsqrcode
以上是关于4种方法生成二维码 （js 控制canvas 画出 二维码）的主要内容，如果未能解决你的问题，请参考以下文章