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

 二维码原理：

二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维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. 【转】Java中Vector和ArrayList的区别

    首先看这两类都实现List接口,而List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList.List用于存放多个元素,能够维护元素的次序,并且允许元素的重复.3个具体 ...

  2. 【点滴积累】通过特性(Attribute)为枚举添加更多的信息

    转:http://www.cnblogs.com/IPrograming/archive/2013/05/26/Enum_DescriptionAttribute.html [点滴积累]通过特性(At ...

  3. The 10 Most Important Security Controls Missing in JavaEE--reference

    JavaEE has some excellent built-in security mechanisms, but they don’t come close to covering all th ...

  4. Map的遍历方式

    public class Mapper { public static void main(String[] args) {  Map<String, String> map = new ...

  5. FileFilter, FilenameFilter用法和文件排序

    FileFilter和FilenameFilter这两个类的用法都很简单,都只有一个方法 FileFilter /*** @param pathname The abstract pathname t ...

  6. Android学习之Intent传递数据

    Intent在Activity中的作用主要是有两个: 1.启动目标Activity 2.传递数据 Intent在传递数据时分两种情况:向下一个Activity传递数据和从下一个Activity返回数据 ...

  7. Java并发——线程安全、线程同步、线程通信

    线程安全 进程间"共享"对象 多个“写”线程同时访问对象. 例:Timer实例的num成员,即add()方法是用的次数.即Timer实例是资源对象. class TestSync ...

  8. C#操控条形码扫描枪

    // 条码扫描器 // 窗体部分相关代码: using System; using System.Collections.Generic; using System.ComponentModel; u ...

  9. Unity3D 之武器系统冷却功能的实现方式

    先上方法 //如果Fire1按钮被按下(默认为ctrl),每0.5秒实例化一发子弹 public GameObject projectile; public float fireRate = 0.5F ...

  10. 20151209jquery学习笔记Ajax 代码备份

    /*$(function () { $("input").click(function() { $.ajax({ type:'POST', url:'test.php', data ...