描述： jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的，体积也比较                 小，使用gzip压缩后才不到4kb。因为它是直接在客户端生成的条码， 所以不会有图片下载的过程，能够实现快速生成。它是基于一个多语言的类库封装的，也不依赖于其他额外的服务。

好处：使用jquery-qrcode的好处，不需要在服务器端生成多余的二维码图片，二维码直接通过JavaScript直接在客户端生成，有效减少带宽，以及维护成本。

首先大家可以看一下jquery.qrcode.js官网，官网上也有例子。但是官网的 jquery.qrcode.js是不支持中文的，废话不多说了，现在我们开始吧。

官网上的 qrcode.js 文件里没有实现中文的支持和LOGO的添加，现在我们将这个文件修改为jquery.qrcode.js文件了。此外还需要一个对中文进行转码的文件，该文件为              utf.js。然后在 jquery.qrcode.js 文件中调用了 utf.js 文件的 utf16to8(str) 方法对其中文进行了转码。

下面是我写的一个示例，该示例需要的js文件有 jquery.qrcode.js  和 utf.js  以及 jquery-1.8.0.js 。还有一个 LOGO图片 可点击下载文件。

调用的jsp代码如下：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"

 2     pageEncoding="UTF-8"%>

 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 4 <html>

 5 <head>

 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 7 <title>该二维码支持中文和LOGO</title>

 8

 9 <script type="text/javascript" src="jquery-1.8.0.js"></script>

10 <script type="text/javascript" src="utf.js"></script>

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

12 <script type="text/javascript">

13     $(document).ready(function() {

14         $("#qrcodeCanvas").qrcode({

15             render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好

16             text : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接

17             width : "200",               //二维码的宽度

18             height : "200",              //二维码的高度

19             background : "#ffffff",       //二维码的后景色

20             foreground : "#000000",        //二维码的前景色

21             src: 'photo.jpg'             //二维码中间的图片

22         });

23     });

24 </script>

25

26 </head>

27 <body>

28     <center>

29       <h2>该二维码支持中文和LOGO</h2>

30       <div id="qrcodeCanvas"></div>

31     </center>

32 </body>

33 </html>

js生成二维码 中间有logo的更多相关文章

  1. JS 生成二维码和加上logo图片

    参考链接:https://www.cnblogs.com/chiyi/p/5710324.html,http://www.jq22.com/jquery-info294 demo链接:demo查看 d ...

  2. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  3. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  4. php--------php库生成二维码和有logo的二维码

    php生成二维码和带有logo的二维码,上一篇博客讲的是js实现二维码:php--------使用js生成二维码. 今天写的这个小案例是使用php库生成二维码: 效果图:        使用了 php ...

  5. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...

  6. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  7. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  8. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  9. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

随机推荐

  1. 也说python的类--基于python3.5

    在面向对象的语言中,除了方法.对象,剩下的一大重点就是类了,从意义上来讲,类就是对具有相同行为对象的归纳.当一个或多个对象有相同属性.方法等共同特征的时候,我们就可以把它归纳到同一个类当中.在使用上来 ...

  2. js加解密字符串

    项目中经常会有url带参并取参数值的问题,最常见的就是登录后再回到原来的页面redirect_uri,我们通常会使用 encodeURIComponent() 转码,当然简单的可以这样使用,如果涉及到 ...

  3. 软件架构---nop插件学习

    http://www.cnblogs.com/haoxinyue/archive/2013/06/06/3105541.html http://www.cnblogs.com/aaa6818162/p ...

  4. ***PHP 数组排序 +php二维数组排序方法（PHP比较器）

    PHP - 一维数组的排序函数 在本节中,我们将学习如下 PHP 数组排序函数: sort() - 以升序对数组排序 rsort() - 以降序对数组排序 asort() - 根据值,以升序对关联数组 ...

  5. Python-匿名函数

    lambda 函数是一种快速定义单行的最小函数,可以用在任何需要函数的地方   常规版本: def fun(x,y) return x*y lambda版本: r = lambda x,y:x*y p ...

  6. flume+kafka+spark streaming整合

    1.安装好flume2.安装好kafka3.安装好spark4.流程说明: 日志文件->flume->kafka->spark streaming flume输入:文件 flume输 ...

  7. [算法总结]partition (quicksort)

    private int partition(int[] nums, int lo, int hi) { if (lo >= hi) { return lo; } int i = lo; int ...

  8. 使用git grep进行git搜索

    1.git grep foo 会自动map所有包含foo的文件 2.git grep -n foo  显示行号 3.git grep --name-only foo 只显示文件名 4.git grep ...

  9. RadioGroup 和 ViewPager 绑定 实现切换

    package com.jereh.helloworld.activity.day12; import android.app.Activity; import android.os.Bundle; ...

  10. 《UML大战需求分析》阅读随笔（二）

    在需求方面,我自己大体认为,分为两个部分:客户和软件公司. 客户:提出需求. 软件公司:解决需求. 这就是我所认为的 需求的关系. 就像书中所说的: 软件公司(项目组)始终都是跟着客户的后面追,客户需 ...