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

  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. jQuery 异步和同步请求

    在jQuery Ajax里面有一个async 参数 , 默认值 为true , 请求为异步请求 , false 为同步请求 .. 使用ajax加载数据返回页面并赋值,然后前端取出该值 这其中涉及到代码 ...

  2. Jquery 点击父类全选子类 , 子类选父类

    <p> <label style="font-size:18px;font-weight: bold;" class="checkboxs"& ...

  3. Sprint第一个冲刺（第六天）

    一.Sprint介绍 今天我们完成了修改注册和登录直接用滚轮选择,主界面加入轮播图 . 实验截图: 主界面加入轮播图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  4. Jitsi 开源视频会议远程桌面共享&&文档共享工具

    1. 特点 主要功能特点: 支持网络视频会议,使用SFU模式实现视频路由器功能. 支持SIP帐号注册电话呼叫. 支持安卓苹果终端. 支持文档共享功能,即时消息功能. 支持中文界面. 支持会议邀请,密码 ...

  5. java的时间

    先看例子: import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calendar; imp ...

  6. 用 Linux blkid 命令查找块设备详情

    今天我们将会向你展示如何使用 lsblk 和 blkid 工具来查找关于块设备的信息,我们使用的是一台安装了 CentOS 7.0 的机器. lsblk lsblk 是一个 Linux 工具,它会显示 ...

  7. https 请求的端口是443 注意

    注意: 这里录制https的请求 端口号一定是443 才可以抓取到!!!!!! (进坑多次)

  8. Java-Runoob-高级编程：Java 网络编程

    ylbtech-Java-Runoob-高级编程:Java 网络编程 1.返回顶部 1. Java 网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.n ...

  9. python学习（二十七） 元组

    # 元组是不可变的,不能改变元素的值,也不能增加.减少元素my_tuple = (1, 2, 3, 3)print(my_tuple) # 查找元素位置print(my_tuple.index(2)) ...

  10. 【BZOJ】1030: [JSOI2007]文本生成器（AC自动机+dp）

    题目 传送门:QWQ 传送到洛谷QWQ 分析 我一开始也不会做这题的,后来看了很多网上的题解,终于AC了.(我好菜啊) 主要参考:传送门QWQ 直接搞非常麻烦,反正我是不会做.于是考虑求反,即求有多少 ...