描述： 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代码如下：

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

     pageEncoding="UTF-8"%>

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

 <html>

 <head>

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

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

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

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

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

 <script type="text/javascript">

     $(document).ready(function() {

         $("#qrcodeCanvas").qrcode({

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

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

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

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

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

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

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

         });

     });

 </script>

 </head>

 <body>

     <center>

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

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

     </center>

 </body>

 </html>

运行结果：

下面是自己做的示例源码  example.zip  ，点击可下载源码。

版权声明：本文为博主原创文章，未经博主允许不得转载。

jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO的更多相关文章

  1. C#Qrcode生成二维码支持中文,带图片，带文字

    C#Qrcode生成二维码支持中文带图片的操作请看二楼的帖子,当然开始需要下载一下C#Qrcode的源码 下载地址 : http://www.codeproject.com/Articles/2057 ...

  2. 使用jquery-qrcode在页面上生成二维码,支持中文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. C# Qrcode生成二维码支持中文,带图片，带文字 2015-01-22 15:11 616人阅读 评论(1) 收藏

    1.下载Qrcode库源码,下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 2.打开源码时,部分类库 ...

  4. Qrcode生成二维码支持中文,带图片,带文字

    1.下载Qrcode库源码, 下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library2.打开源码时, 部分类 ...

  5. jquery.qrcode生成二维码支持中文

    基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...

  6. 使用jquery.qrcode生成二维码支持logo，和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  7. 微信支付支付宝支付生成二维码的方法（php生成二维码的三种方法）

    如果图简单,可以用在线生成 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xinzhenkj.com 最简单 ...

  8. 使用PHP生成二维码的两种方法(带logo图像)

    一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  9. 使用PHP生成二维码支持自定义logo

    require_once 'phpqrcode/phpqrcode.php'; //引入类库 $text = "https://www.baidu.com/";//要生成二维码的文 ...

  10. spring boot:用zxing生成二维码,支持logo(spring boot 2.3.2)

    一,zxing是什么? 1,zxing的用途 如果我们做二维码的生成和扫描,通常会用到zxing这个库, ZXing是一个开源的,用Java实现的多种格式的1D/2D条码图像处理库. zxing还可以 ...

随机推荐

  1. sqlcmd

    使用sqlcmd可以在批处理脚本中执行SQL.虽然这个命令的参数很多,但幸运的是,我们不需要全部理解,在这里简要介绍以下几个: { -U login_id [ -P password ] } | –E ...

  2. Delphi经验总结(2)

    Q: 怎么来改变ListBox的字体呢?就修改其中的一行. A: 先把ListBox1.Style 设成lbOwnerDrawFixed 然后在 OnDrawItem 事件下写下如下代码 proced ...

  3. Java for LeetCode 047 Permutations II

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  4. iOS两个框架之间的类型转换--"桥接"技术

    话不多说,直接举例说明吧.场景模拟:需要开发一个通讯录相关功能,实现访问以及添加等等.这时,需要使用的框架是Core Foundation.而此框架使用的是C语言,例如:CFArrayRef,CFSt ...

  5. 基于gitosis的Git云端服务器配置

    (本文需要自己实践,由于时间关系,我仅仅是做了整理和快速的练习,至于笔记中的账号和ip域名都是我参考文章中的.如果读者有任何问题欢迎留言和发邮件到luoquantao@126.com) 硬件:云端阿里 ...

  6. java静态与非静态区别

    这里的静态,指以static关键字修饰的,包括类,方法,块,字段. 非静态,指没有用static 修饰的. 静态有一些特点: 1.全局唯一,任何一次的修改都是全局性的影响 2.只加载一次,优先于非静态 ...

  7. 【转】c# 协变和逆变

    本文转自:http://www.cnblogs.com/rr163/p/4047404.html C#的协变和逆变 由子类向父类方向转变是协变,用out关键字标识,由父类向子类方向转变是逆变,用in关 ...

  8. 1.单件模式(Singleton Pattern)

    意图:为了保证一个类仅有一个实例,并提供一个访问它的全局访问点. 1.简单实现(多线程有可能产生多个实例) public class CommonSigleton { /// <summary& ...

  9. android 搭建环境工具

    ---恢复内容开始--- 一.下载jdk 1.JDK可以去sun的官方网站下载Java SE Development Kit 6  http://java.sun.com/javase/downloa ...

  10. 关于html5不支持frameset的解决方法

    转自:http://blog.sina.com.cn/s/blog_b2813a790101ejvf.html html5已经不支持frameset了,很郁闷,看了大家的解决方法,无非就是两种1. 使 ...