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

 二维码原理：

二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维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 （重点）
<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://hdimg.qiniudn.com/Uploads/141889425189.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>

4种方法生成二维码 （js 控制canvas 画出 二维码）的更多相关文章

  1. 教你用开源 JS 库快速画出 GitHub 章鱼猫

    本文作者:HelloGitHub-kalifun 在上一篇文章我们介绍了 Zdog 如何使用,接下来这篇文章我将带领各位利用 Zdog 画出一个 GitHub 章鱼猫(和官方的还是有些差别的). Zd ...

  2. 动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)

    在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...

  3. 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  4. 两种PHP生成二维码的方法

    PHP生成二维码,个人认为最常用的有两种,1.使用google的api生成,2.使用PHP QR Code生成,两种方法生成的二维码都是很清淅的,效果不错.下面来分别说明这两种方法如何实现. 一.PH ...

  5. 四种Sandcastle方法生成c#.net帮助类帮助文档

    方法一 前端时间在网上收集和自己平时工作总结整理了<干货,比较全面的c#.net公共帮助类>,整理完成上传github之后我又想,既然是帮助类,总得有个帮助文档于是乎想到了Sandcast ...

  6. 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core

    百度地图和高德地图坐标系的互相转换   GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...

  7. url地址数据参数转化JSON对象（js三种方法实现）

    当我们用get方法提交表单时,在url上会显示出请求的参数组成的字符串,例如:http://localhost:3000/index.html?phone=12345678901&pwd=12 ...

  8. 应对加密js的三种方法

    经常遇到网页在登录后会对用户输入的帐号和密码通过js进行加密,导致模拟登录这类网站时受到阻碍 这里小记一下当前解决该问题的三种方法 1.利用python实现js同等加密. 2.利用selenium模拟 ...

  9. JS做类型检测到底有几种方法？看完本文就知道了！

    JS有很多数据类型,对于不同数据类型的识别和相互转换也是面试中的一个常考点,本文主要讲的就是类型转换和类型检测. 数据类型 JS中的数据类型主要分为两大类:原始类型(值类型)和引用类型.常见的数据类型 ...

随机推荐

  1. 【C#】Entity Framework 增删改查和事务操作

    1.增加对象 DbEntity db = new DbEntity(); //创建对象实体,注意,这里需要对所有属性进行赋值(除了自动增长主键外),如果不赋值,则会数据库中会被设置为NULL(注意是否 ...

  2. 在Spring中使用JDK定时器实现调度任务

    在Spring中使用JDK定时器实现调度任务 作者:chszs,转载需注明.博客主页: http://blog.csdn.net/chszs 本文探讨Spring如何集成JDK的Timer定时器,实现 ...

  3. ThinkPad New X1 Carbon中关闭任务栏上的触摸键盘

    1. 执行services.msc 2. 选择Touch Keyboard and Handwriting Panel 服务. 3. 将其停止执行. 并disable.

  4. nginx 安装手记 分类： Nginx 服务器搭建 2015-07-14 14:28 15人阅读 评论(0) 收藏

    Nginx需要依赖下面3个包 gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) zlib-1.2.8.tar.gz rewrite 模块需要 pcre 库 ( ...

  5. kontalk

    Site: http://kontalk.org/ Code: https://github.com/kontalk/androidclient

  6. 【OpenCV-Python】Python Extension Packages for Windows

    下载相关Python的扩展包,请点击这里: This page provides 32- and 64-bit Windows binaries of many scientific open-sou ...

  7. [Javascript] Object.freeze() vs Object.seal()

    let person = { firstName: "Zhentian", lastName: "Wan" }; /*Object.freeze() makes ...

  8. [置顶] c#对于文件的操作

    在system.iO:命名空间中提供了两种遍历枚举文件夹的类,Directory 和DirectoryInfo, 他们都有一个方法GetDirectories():来便利枚举文件夹, /// < ...

  9. 从Kali 2.0 转至 Kali Rolling

    1. 修改官方软件库列表 编辑/etc/apt/sources.list,注释掉原有内容,然后添加下述内容. # kali rolling deb http://http.kali.org/kali ...

  10. Java并发——Fork/Join框架

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4631466. ...