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

  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. [Scala函数特性系列]——按名称传递参数

    通常情况下,函数的参数是传值参数:即参数的值在它被传递给函数之前被确定.但是,如果我们需要编写一个接收参数不希望马上计算,直到调用函数内的表达式才进行真正的计算的函数.对于这种情况,Scala提供按名 ...

  2. Orders

    The stores manager has sorted all kinds of goods in an alphabetical order of their labels. All the k ...

  3. 重温CLR（十六） CLR寄宿和AppDomain

    寄宿(hosting)使任何应用程序都能利用clr的功能.特别要指出的是,它使现有应用程序至少能部分使用托管代码编写.另外,寄宿还为应用程序提供了通过编程来进行自定义和扩展的能力. 允许可扩展性意味着 ...

  4. LeetCode Word Abbreviation

    原题链接在这里:https://leetcode.com/problems/word-abbreviation/description/ 题目: Given an array of n distinc ...

  5. 【Leetcode 371】Sum of Two Integers

    问题描述:不使用+是或-操作符进行整数的加法运算 int getSum(int a, int b); 我的思路:把整数化成二进制进行运算,注意类型是int,也就是要考虑负数.关于负数的二进制表示可见之 ...

  6. Spring Cloud Bus 消息总线 RabbitMQ

    Spring Cloud Bus将分布式系统中各节点通过轻量级消息代理连接起来. 从而实现例如广播状态改变(例如配置改变)或其他的管理指令. 目前唯一的实现是使用AMQP代理作为传输对象. Sprin ...

  7. apktool重新打包错误

    E:\apktool-install-windows-r05-ibot\apktool-install-windows-r05-ibot\.\test_apk_name\res\layout-larg ...

  8. java代码--------实现随机输出100个随机数，10行，0--到9的数字

    总结:妹纸不是那么会表述,如有不妥之处,请提出来 package com.sads; //杰伦的世界 //实现在0-100个数中,随机输出数每行10个数,也就是10行10列,这些数在0---到9之间 ...

  9. SpringMVC中注解控制器及数据绑定

    一.Spring2.5之前,我们都是通过实现Controller接口或其他实现来定义我们的处理器类. 二.Spring2.5引入注解式处理器支持,通过@Controller 和 @RequestMap ...

  10. 杂项：HTML5-1/3-发展历程

    ylbtech-杂项:HTML5-1/3-发展历程 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准.外语原文:W3C Recommendat ...