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 接口

               $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代码 转换为 canvas （重点）

demo: http://hxend.com/jsqrcode/test/

<code class="javascript string">"text/javascript"</code> <code class="javascript plain">src=</code> <code class="javascript string">"http://sandbox.runjs.cn/uploads/rs/142/gjxgxu0g/qrgen.min.js"</code> <code class="javascript plain">>

               <code class="javascript string">"text/javascript"</code> <code class="javascript plain">></code> </div> <div class="line number4 index3 alt1"> <code class="javascript spaces">               </code> <code class="javascript plain">qrcode(document.getElementById(</code> <code class="javascript string">'qrcode'</code> <code class="javascript plain">),{</code> </div> <div class="line number5 index4 alt2"> <code class="javascript spaces">                   </code> <code class="javascript plain">data:</code> <code class="javascript string">'http://geraldl.net'</code> </div> <div class="line number6 index5 alt1"> <code class="javascript spaces">               </code> <code class="javascript plain">});</code> </div> <div class="line number7 index6 alt2"> <code class="javascript spaces">               </code> <code class="javascript plain">

　　

3. 图片接口

"http://qrcoder.sinaapp.com?t=hello world" >

　　

4.demo 里面http://hxend.com/jsqrcode/test/ 代码

        QRCode
        <code class="javascript string">"text/javascript"</code> <code class="javascript plain">src=</code> <code class="javascript string">"http://files.cnblogs.com/webers/qrcode-light.js"</code> <code class="javascript plain">>
        <code class="javascript string">"text/javascript"</code> <code class="javascript plain">src=</code> <code class="javascript string">"http://files.cnblogs.com/webers/qrgen.js"</code> <code class="javascript plain">>


                     二维码生成                               图片: //hdimg.qiniudn.com/Uploads/141889425189.png>                  清理边缘                                        文本: http:</code> <code class="javascript comments">//www.btgoogle.com              大小:                                                                                                                                                                                                        效果: # data=l>液体 # data=s>方块 # data=r>圆                               Foreground color: #4169e1>                  Background color: #ffffff>                  Outside-border color: #cd5c5c>                  Inside-border color: #191970>                           生成
            二维码生成
                             图片: //hdimg.qiniudn.com/Uploads/141889425189.png>                  清理边缘
                图片: //hdimg.qiniudn.com/Uploads/141889425189.png>
                清理边缘


            文本: http:</code> <code class="javascript comments">//www.btgoogle.com
            大小:
                                                                                                                                                                                                      效果: # data=l>液体 # data=s>方块 # data=r>圆










                             Foreground color: #4169e1>                  Background color: #ffffff>                  Outside-border color: #cd5c5c>                  Inside-border color: #191970>
                Foreground color: #4169e1>
                Background color: #ffffff>
                Outside-border color: #cd5c5c>
                Inside-border color: #191970>

            生成


        <code class="javascript string">"http://files.cnblogs.com/webers/take.js"</code> <code class="javascript plain">>

　　看在我写这么好的demo  和 分享这么好的二维码设计 给我一个推荐吧。该demo github:https://github.com/Hxend/jsqrcode