生成二维码方法汇总


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 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 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 随机生成10位字符代码
2009/03/26 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
php header功能的使用
2013/10/28 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
Overload和Override的区别
2012/09/02 面试题
行政专员的岗位职责
2014/03/10 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server