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

 二维码原理：

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

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  2. Spring AOP切面

    在软件开发中,分布于应用多出的功能被称为和横切关注点. 通常,这些横切关注点从概念上是与应用的业务逻辑相分离的(可是往往直接嵌入到应用的业务逻辑中).将这些横切关注点与业务逻辑相分离正是面向切面编成( ...

  3. Linq-表达式常用写法

    这里主要是将数据库中的常用操作用LAMBDA表达式重新表示了下,用法不多,但相对较常用,等有时间了还会扩展,并将查询语句及LINQ到时也一并重新整理下:1.select语句:books.Select( ...

  4. Centos下的IO监控与分析

        近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performance and Tuni ...

  5. ORACLE ------MYSQL2014 大会 PPT

    https://oracleus.activeevents.com/2014/connect/focusOnDoc.do?focusID=17888

  6. 使用ExpandableListView实现一个时光轴

    在许多App上都能看到时光轴的效果,比如携程等等,那么我们今天就利用ExpandableListView来实现一个时光轴效果,先来看看效果图: 效果还是挺简单的,这里我们主要是采用Expandable ...

  7. react 组件开发

    参考资料 https://toddmotto.com/react-create-class-versus-component/ React-Native的代码规范,React其实也基本一样~~ htt ...

  8. NC portal怎么重新开始入门，整个配置过程包括配置一个节点

    有一份文档,之后会上传,暂时不上传

  9. SQL Server 2008导入、导出数据库

    SQL Server 2008数据库的导入.导出和Mysql的导出还有一定的区别,刚开始的时候完全摸不到方向,利用Microsoft SQL Server Management Studio进行导入. ...

  10. 学习笔记_过滤器应用（粗粒度权限控制（拦截是否登录、拦截用户名admin权限））

    RBAC ->基于角色的权限控制 l  tb_user l  tb_role l  tb_userrole l  tb_menu(增.删.改.查) l  tb_rolemenu 1 说明 我们给 ...