描述： 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. Cocos2d-JS坐标系统

    标准屏幕坐标系 如果接触过iOS,Android,Windows Phone等系统的应用开发,或使用DOM,CSS开发过Web网页,开发者会非常熟悉所谓的标准屏幕坐标系:左上角为原点,向右为X轴正方向 ...

  2. OC内存管理--zombie对象

    当我们对于内存进行手动管理的时候,会出现两种错误:一种是野指针错误,一种则为内存泄露.这两点也是我们去管理内存时最终要解决的问题. 内存泄漏是指:不在使用的对象,一直保留在内存中未被销毁,一直占有着内 ...

  3. IDE整理

    1.eclipse 下载地址:http://www.eclipse.org/downloads/     2.myeclipse 下载地址:http://www.myeclipseide.com/mo ...

  4. python基础——切片

    python基础——切片 取一个list或tuple的部分元素是非常常见的操作.比如,一个list如下: >>> L = ['Michael', 'Sarah', 'Tracy', ...

  5. pycharm上运行django服务器端、以及创建app方法

     快来加入群[python爬虫交流群](群号570070796),发现精彩内容. 安装Django  下载Django包,解压缩. CMD 进入解压路径下. 执行:python setup.py in ...

  6. linux上ln链接命令详细说明

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...

  7. PHP版QQ互联OAuth示例代码分享

    )   {     $ch = curl_init();     if(! $flag) curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);     cu ...

  8. Sqlite实现默认时间为当前时间列的方法（转）

    原文地址: http://blog.csdn.net/derryzhang/article/details/5033209 在SQL Server中,创建表格的时候,对于时间列有时候我们可以根据需要指 ...

  9. EntityFramework 6.0< Code First > 连接 Mysql数据库(转)

    http://blog.csdn.net/kmguo/article/details/19650299 网上有很多关于用EntityFrame来连接Mysql数据库的教程,可是很多并不靠谱,转载的太多 ...

  10. Fragments碎片

    A Fragment represents a behavior or a portion of user interface in an Activity. 在一个Activity活动中,一个Fra ...