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

  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. 解决遇到Linux网络配置，从熟悉网络配置文件入手

    如果接触过Linux,网络配置是一个比较棘手的问题.但是Linux是文件为基础来构建的系统,包括我们windows中设备,Linux也视为文件.所以只要我们明白文件的作用.就能对Linux更加的熟悉, ...

  2. 系列文章--Enterprise Library文章总结

    自Enterprise Library 1.1 推出以来,Terry写了一系列的关于Enterprise Library的文章,其中得到了很多朋友的支持,在这里一并表示感谢.为了方便大家的阅读,这里我 ...

  3. 【转】VC 多线程中控制界面控件的几种方法

    原文网址:https://software.intel.com/zh-cn/blogs/2010/11/30/vc-3 为了保证界面的用户体验经常要把数据处理等放到子线程中进行,然后把结果更新到主界面 ...

  4. zipkin之brave

    brave是同步收集信息,及计算调用时间,但是异步发送日志信息给zipkin:所以很多时候你无法在第一时间获取日志数据可能需要等一会.另外在写一个demo的时候,因为最后睡了1秒,经常会发现丢了一些日 ...

  5. NetCore 下集成SignalR并进行分组处理

    Tips: 1.注意跟普通版Net.MVC的前端处理方式不一样,以前可以connection.start()后直接done里面再做逻辑处理,现在不行了 建议做法是在具体的业务Hub里重写OnConne ...

  6. ASP.NET Redis 开发 入门

    ASP.NET Redis 开发   文件并发(日志处理)--队列--Redis+Log4Net Redis简介 Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据 ...

  7. 安卓5.0宣告了ARM平台全面进入64位时代

    安卓5.0宣告了ARM平台全面进入64位时代 2014年10月份,安卓5.0正式版发布了,安卓5.0支持64位CPU,安卓5.0全面启用ART运行模式,在程序安装的时候,进行预编译,新的运行环境能够使 ...

  8. Paramiko,数据库

    Paramiko 该模块基于SSH用于连接远程服务器并执行相关操作 SSHClient 用于连接远程服务器并执行基本命令 import paramiko # 创建SSH对象 ssh = paramik ...

  9. 阿里云经典网络下一键安装RouterOS-ROS系统

    1.阿里云环境centos6.9 x64: 内网网卡为eth0 外网网卡为eth1 阿里云的linux下硬盘名称为/dev/vda 注意阿里云的安全组建议开放任意协议和端口,任意IP允许访问 今天测试 ...

  10. 第十章 Secret & Configmap （上）

    敏感信息,直接保存在容器镜像中显然不妥,比如用户名.密码等.K8s提供的解决方案是Secret. Secret会以密文的方式存储数据,避免了在配置文件中保存敏感信息.Secret会以Volume的形式 ...