生成二维码方法汇总


Posted in Javascript onDecember 26, 2014

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

二维码原理

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

以上4种方法,第3种最简单,第二种是我推荐的,自由度大些,小伙伴根据自己的需求来选择吧

Javascript 相关文章推荐
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
理解javascript中DOM事件
Dec 25 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
Javascript中的五种数据类型详解
Dec 26 #Javascript
javascript工厂方式定义对象
Dec 26 #Javascript
jQuery中click事件用法实例
Dec 26 #Javascript
javascript实现类似超链接的效果
Dec 26 #Javascript
浅析javascript操作 cookie对象
Dec 26 #Javascript
浅谈javascript对象模型和function对象
Dec 26 #Javascript
angularjs基础教程
Dec 25 #Javascript
You might like
PHP 实用代码收集
2010/01/22 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
Python快速排序算法实例分析
2017/11/29 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python3实现购物车功能
2018/04/18 Python
python 对key为时间的dict排序方法
2018/10/17 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
我未来的职业规划范文
2014/01/11 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
小学生常见病防治方案
2014/06/06 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电