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

  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下Eclipse配置安装 PyDev（Pydev插件一直不能成功，安装这个插件失败的问题）

    pydev插件安装方式如果采取从网络上下载,然后解压到eclipse中文件夹到方式,运行到时候可能会导致重启eclipse后根本看不到这个插件! 原因以及解决方式,看下面!  转自:http://ww ...

  2. wpf Tree

    code using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...

  3. css 2D动画

    2D动画: 通过 CSS3  transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动. ...

  4. 好用的 convert freestyle jenkins jobs to pipeline 插件使用

    1. 安装      安装,重启即可,非常简单   2. 使用     原有配置,主要列出执行     生成的jenkins pipeline   3. 构建效果   4. 参考资料 https:// ...

  5. QT4.8.6静态编译

    下载源安装程序,http://download.qt.io/archive/qt/4.8/4.8.6/qt-everywhere-opensource-src-4.8.6.tar.gz 解压 cd 进 ...

  6. 批量修改文件名的bash脚本

    #!/bin/bash while IFS='' read -r line || [[ -n "$line" ]]; do # echo "sox $line --cha ...

  7. php的闭包

    闭包是指在创建时封装周围状态的函数,即使闭包所在的环境的不存在了,闭包中封装的状态依然存在. 匿名函数其实就是没有名称的函数,匿名函数可以赋值给变量,还能像其他任何PHP函数对象那样传递.不过匿名函数 ...

  8. easyui-datebox设置只能选择年月，设置当前月的第一天和最后一天

    来源:https://www.cnblogs.com/xiaoxiao0314/p/7041731.html 1. 设置只能控件只能显示年月:search_date_monthreport为控件id, ...

  9. struts2学习(4)struts2核心知识III

    一.result配置: result - name 就是前面返回的值,success,error等. type: dispatcher. 默认是这个,底层是jsp的forward: redirect: ...

  10. Jetty实战（杂七杂八）

    最近开始选择JETTY作为服务器了,乘这现在空闲点学习了些JETTY的部署知识,原来她真的跟TOMCAT很类似,先总结如下: 部署应用方法(下载好jetty); 方法一: 直接将应用的 war包放在j ...