生成二维码方法汇总

 更新时间:2014年12月26日 09:48:53   投稿:hebedich  
这篇文章主要汇总介绍了生成二维码方法的相关资料,需要的朋友可以参考下

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

二维码原理

二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维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. 图片接口

复制代码 代码如下:

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=https://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实现审核流程状态的动态显示进度条

    JavaScript实现审核流程状态的动态显示进度条

    对于有很多流程的东西,我们希望能够根据不同的阶段,用流程条对应地进行显示,非常直观,给用户带来极好的用户体验,下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能,需要的的朋友参考下
    2017-03-03
  • JavaScript的setter与getter方法

    JavaScript的setter与getter方法

    这篇文章主要为大家详细介绍了JavaScript的setter与getter方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JavaScript中AOP的实现与应用

    JavaScript中AOP的实现与应用

    这篇文章主要给大家介绍了关于JavaScript中AOP的实现与应用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • JavaScript中的console.profile()函数详细介绍

    JavaScript中的console.profile()函数详细介绍

    这篇文章主要介绍了JavaScript中的console.profile()函数详细介绍,本文讲解了console.profile()函数的浏览器支持情况、console.profile()的使用、Firebug中Profile按钮的使用等内容,需要的朋友可以参考下
    2014-12-12
  • 基于input框覆盖掉数字英文的实例讲解

    基于input框覆盖掉数字英文的实例讲解

    下面小编就为大家带来一篇基于input框覆盖掉数字英文的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js操作数组函数实例小结

    js操作数组函数实例小结

    这篇文章主要介绍了js操作数组函数,实例分析了JavaScript针对数组删除指定元素、去重及删除指定下标元素的实现方法,需要的朋友可以参考下
    2015-12-12
  • 批量下载对路网图片并生成html的实现方法

    批量下载对路网图片并生成html的实现方法

    下面小编就为大家带来一篇批量下载对路网图片并生成html的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考
    2016-06-06
  • Javascript表达式中连续的 && 和 || 之赋值区别

    Javascript表达式中连续的 && 和 || 之赋值区别

    了区分赋值表达式中出现的连续的 ‘&&’和 ‘||’的不同的赋值含义,做了一个小测试.
    2010-10-10
  • jQuery及JS实现循环中暂停的方法

    jQuery及JS实现循环中暂停的方法

    这篇文章主要介绍了jQuery及JS实现循环中暂停的方法,以实例形式分析了循环中暂停的原理及实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • javascript检测浏览器flash版本的实现代码

    javascript检测浏览器flash版本的实现代码

    javascript检测浏览器flash版本的实现代码,需要的朋友可以参考下。
    2011-12-12

最新评论