前段时间项目中需要动态的生成二维码，经过评估，前后端生成都可以。但后端生成会有两个问题：

  1. 没有找到正规发布出来的后端开源库。
  2. 二维码图片，会随着商品的增加而不断变多。

基于以上两个问题，决定在前端生成二位码。当时使用的是 jquery.qrcode.min.js，可以在github上找到这个类库。

https://github.com/jeromeetienne/jquery-qrcode

下面来介绍下这个类怎么来使用，先看下面这个例子。其中第10行调用方法qrcode来生成二维码。

 <!DOCTYPE html>

 <html>

     <head>

         <script charset='utf-8' type='text/javascript' src='./jquery.js'></script>

         <script src="./jquery.qrcode.min.js" type="text/javascript"></script>

         <script type="text/javascript">

         $(document).ready(function(){

           $('#qr_gen').click(function()

           {

             $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()});

           });

         });

         </script>

     </head>

     <body>

         <h1>QR CODER</h1>

         <div>

             <label for="qr_link">URL:</label>

             <input id="qr_link" type="text" value="I am going to be a quick response code." style="width:450px;" />

             <button id="qr_gen" value="Generate">Generate</button> <br />

         </div>

         <div id="qr_container" style="margin:auto; position:relative;"></div>

         </div>

     </body>

 </html>

我们来介绍下这几个参数：

render: 二维码图片的生成方式。支持table和canvas来渲染。

height: 二维码高度。

width: 二维码宽度。

correctlevel: 二维码容错级别。

text: 二维码内容。

我们先来看看用table和canvas渲染有什么不同。执行了上面的例子，大家可以看到，二维码使用canvas画出来，在网页上输出一个canvas节点。但是用到table的话，我们会发现二维码实际是使用table表格把每一个二维码的点画出来。网页上的Dom元素会暴多（目前没有发现有拖垮浏览器的现象）。

对一个有追求的人，或者大型的网站，需要对ie, chrome, firefox等浏览器支持。选择canvas，ie7就没办法支持。那就选择table吧，一切看起来都很美好。但在实际使用的过程中，当二维码的内容较多时，二维码的尺寸较小时(比如120px * 120 px)，用table来渲染，会发现生成的二维码很难识别（主要发生在chrome上）。

使用下面的办法，所有的浏览器完美支持，而且大部分的用户都会是canvas渲染。

 try

 {

     document.createElement('canvas').getContext('2d');

     $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()});

 } catch (e)

 {

     $('#qr_container').qrcode({render:"table",height:120, width:120,correctLevel:0,text:$('#qr_link').val()});

 }

关于这个类库，github上也有简短的用法介绍，不过真的很简短。但作为攻城狮这都不是事，大家可以直接看源代码。源代码是压缩过的，解压一下就行了。

在线解压工具：http://tool.lu/js/

欢迎大家来讨论这个话题。

前端生成二维码 - Javascript生成二维码（QR）的更多相关文章

  1. 前端笔记知识点整合之JavaScript（二）关于运算符&初识条件判断语句

    运算符 数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换.   //隐 ...

  2. Javascript生成二维码（QR）

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  3. 使用javascript生成当前博文地址的二维码图片

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  4. 使用JavaScript生成二维码教程-附qrcodejs中文文档

    使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...

  5. QrCode C#生成二维码 及JavaScript生成二维码

    一 C#的二维码    示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...

  6. 基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...

  7. C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码（二）

    1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...

  8. jquery.qrcode二维码插件生成彩色二维码

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为tab ...

  9. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

随机推荐

  1. UWP 中的 LaunchUriAsync，使用默认浏览器或其他应用打开链接

    古老的 Win32 应用启动其他程序太过方便,以至于一部分开发者都已经不记得 Windows 能通过关联协议的方式通过统一资源定位符(URI)来启动应用程序了. 转到 UWP 后,使用 URI 启动应 ...

  2. Epub格式的电子书——文件组成

    epub格式电子书遵循IDPF推出的OCF规范,OCF规范遵循ZIP压缩技术,即epub电子书本身就是一个ZIP文件,我们将epub格式电子书的后缀.epub修改为.zip后,可以通过解压缩软件(例如 ...

  3. Tornado部署与运行

    运行多个Tornado实例 网页响应不是特别的计算密集型处理多个实例充分利用 CPU多端口怎么处理4.使用Supervisor监控Tornado进程安装(注意看是否需要指定使用python2版本) s ...

  4. uuid 了解

    什么是UUID? UUID是Universally Unique Identifier的缩写,它是在一定的范围内(从特定的名字空间到全球)唯一的机器生成的标识符.UUID具有以下涵义: 经由一定的算法 ...

  5. 福勒（Martin Fowler）

    福勒(Martin Fowler),在面向对象分析设计.UML.模式.软件开发方法学.XP.重构等方面,都是世界顶级的专家,现为Thought Works公司的首席科学家.Thought Works是 ...

  6. java6枚举类型

    java.lang.Enum > 使用enum定义. 类如: public class EnumDemo { enum Edge { TOP, BOTTOM, LEFT, RIGHT//定义了一 ...

  7. Java-Runoob-高级教程：Java 实例

    ylbtech-Java-Runoob-高级教程:Java 实例 1.返回顶部 1. Java 实例 本章节我们将为大家介绍 Java 常用的实例,通过实例学习我们可以更快的掌握 Java 的应用. ...

  8. zabbix3.44+交换机华为或者H3C模版，监控所有的口updown以及流量的模版

    https://files.cnblogs.com/files/itfat/zbx_export_templates.xml 直接在zabbix导入即可,华为和H3C oid在CPU和内存有少许区别. ...

  9. fir 窗口设计法

    加窗的原因.对于理想的低通滤波器H(exp(jw)),其h(n)是无限长序列.这是可以证明的.因此为了得到有限长的h(n)就需要截断,而这个过程就是加窗.由于h(n)截断即其频率响应就和理想的低通滤波 ...

  10. 记-cloudstack 更改二级存储

    一.问题是由于当初把二级存储挂载到了根分区的文件系统内,并随着慢慢的模板的增加,容量越来越小. 1.先在cloud 网页界面禁用cloudstack区域 2.然后停止cloudstack-manage ...