zoukankan      html  css  js  c++  java
  • 4种方法生成二维码 (js 控制canvas 画出 二维码)

    随着网络的迅速发展 发展 发展,二维码的应用将会越来越多。同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧。下面分享了几个非常好的二维码设计。

     
     二维码原理:
     
    二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维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=http://www.2cto.com/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>
    </html> 
  • 相关阅读:
    监控服务器的各种方法
    测试用例之翻页功能
    Python:基础知识
    一篇看懂Docker
    Web测试和app测试区别?
    用经济学的思维来看待安全测试的学习
    Moco测试知多少?
    「网易官方」极客战记(codecombat)攻略-沙漠-先有付出 才有回报-no-pain-no-gain
    「网易官方」极客战记(codecombat)攻略-沙漠-山谷的风与牛-canyon-of-storms
    「网易官方」极客战记(codecombat)攻略-沙漠-复查-double-cheek
  • 原文地址:https://www.cnblogs.com/ranzige/p/4184471.html
Copyright © 2011-2022 走看看