描述： 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. October 27th Week 44th Thursday 2016

    The art of being wise is the art of knowing what to overlook. 智慧之道在于懂得该忽略什么. Always do your best. Wh ...

  2. MySQL Workbench中修改表字段字符集

    背景介绍重要性必要性作用意义略过,开门见山: 用SQL语法修改字符集,可以参考此篇: http://www.cnblogs.com/HondaHsu/p/3640180.html MySQL提供图形界 ...

  3. 【React】组件生命周期

    初始化阶段 getDefaultPropos:只调用一次,实力之间共享引用 getInitialState:初始化每个实例特有的状态 componentWillMount:render之前最后一次修改 ...

  4. Oracle REGEXP_SUBSTR（）

    REGEXP_SUBSTR函数格式如下: function REGEXP_SUBSTR(String, pattern, position, occurrence, modifier)       _ ...

  5. Startcom SSL证书申请 IIS设置 配置 攻略

    申请具体参考:http://www.cnblogs.com/yibinboy/p/6137426.html 制作要导入服务器IIS上的证书. 点击控制面板的左上角的TOOL BOX,然后点击Creat ...

  6. 数量经济学推荐的Julia教程

    http://quant-econ.net/jl/learning_julia.html Julia最为号称和c媲美的运行速度,想python一下简单的语法,虽然发展还不完善,但任然值得去关注. Ju ...

  7. EXEC sp_executesql

    declare @sql nvarchar(max)declare @nu int set @sql='SELECT * FROM [FMTest].[dbo].[FM_Radio_Station]' ...

  8. 截取QueryString 通过截取?和& 小写

    $(function () { var url = location.href.replace("#", ""); var paraString = url.s ...

  9. lua

    lua的语言特性: 1. lua 的table可以实现多种数据结构:数组.记录.线性表.队列.集合等: 2. lua的closure闭合函数 3. lua的迭代器和泛型的for 4. lua的协同程序 ...

  10. NOIp 2016 总结

    NOIp 2016 总结 -----YJSheep Day 0 对于考前的前一天,晚自习在复习图论的最短路和生成树,加深了图的理解.睡得比较早,养足精力明日再战. Day 1 拿到题目,先过一边,题目 ...