生成二維碼方法彙總

NO IMAGE

隨著網路的迅速發展 發展 發展,二維碼的應用將會越來越多。同時很多隻是很平凡的二維碼,請拿起你的手 把這個二維碼 設計起來吧。下面分享了幾個非常好的二維碼設計。

二維碼原理

二維條碼/二維碼可以分為堆疊式/行排式二維條碼和矩陣式二維條碼。 堆疊式/行排式二維條碼形態上是由多行短截的一維5條碼堆疊而成;矩陣式二維條碼以矩陣的形式組成,在矩陣相應元素位置上用“點”表示二進位制“1”, 用“空”表示二進位制“0”,“點”和“空”的排列組成程式碼。

最近對二維碼產生了興趣 研究了一下二維碼 這裡生出的術語 qrcode  容錯性較高。

資料表示方法

深色模組表示二進位制“1”,淺色模組表示二進位制“0”。
糾錯能力
· L級:約可糾錯7%的資料碼字
· M級:約可糾錯15%的資料碼字
· Q級:約可糾錯25%的資料碼字
· H級:約可糾錯30%的資料碼字

上面的設計 就很完美的利用了 qrcode的容錯性,非常nice  也非常有創意!!

1.google 介面

複製程式碼 程式碼如下:
<?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 (重點)

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

複製程式碼 程式碼如下:
<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. 圖片介面

複製程式碼 程式碼如下:
<img src=”http://qrcoder.sinaapp.com?t=hello world”>

4.demo 裡面http://hxend.com/jsqrcode/test/ 程式碼

複製程式碼 程式碼如下:
<!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=//www.jb51.net/uploadfile/2014/1219/20141219081025437.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>

以上4種方法,第3種最簡單,第二種是我推薦的,自由度大些,小夥伴根據自己的需求來選擇吧

您可能感興趣的文章:

JavaScript生成二維碼圖片小結微信QQ的二維碼登入原理js程式碼解析JavaScript動態生成二維碼圖片基於JavaScript實現生成名片、連結等二維碼使用jquery.qrcode.min.js實現中文轉化二維碼使用PHP生成二維碼的兩種方法(帶logo影象)微信掃描二維碼登入網站程式碼示例php生成二維碼的幾種方式整理及使用例項利用jquery包將字串生成二維碼圖片Javascript生成帶引數的二維碼示例