描述： 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. MySQL的LIMIT与分页优化

    在系统中需要进行分页操作的时候,我们通常会使用LIMIT加上偏移量的办法实现,同时加上合适的ORDER BY子句.如果有对应的索引,通常效率会不错,否则,MySQL需要做大量的文件排序操作. 一个非常 ...

  2. js如何往数组Array中添加元素

    转载自:http://blog.sina.com.cn/s/blog_95fa28e60101mwup.html unshift:将参数添加到原数组开头,并返回数组的长度  pop:删除原数组最后一项 ...

  3. javascript的onbeforeunload函数在IOS上运行

    今天在做项目的时候,组长让我用iPad测试一下前面写的离线缓存,后退不刷新页面,发现在iPad上onbeforeunload函数在iPad上一带而过,不运行??? 无奈之下,发现原来在IOS上,有自己 ...

  4. dbVisualizer破解

    下载dbvis.puk,替换C:\Program Files\DbVisualizer\lib\dbvis.jar中的文件. 替换后打开选手动的key:下载地址dbvis.license

  5. ASP.Net核心对象之HttpResponse

    简介: HttpResponse是对响应报文进行设置的一个对象.通过context. Response 能够得到HttpResponse对象. context.Response.Charset;//获 ...

  6. android 的四种枚举Context.MODE_PRIVATE

    标签: mode_private Context.MODE_PRIVATE:为默认操作模式,代表该文件是私有数据,只能被应用本身访问,在该模式下,写入的内容会覆盖原文件的内容,如果想把新写入的内容追加 ...

  7. grep -n 显示行号

    [root@86 ~]# grep -n "StartDiscoverers" /usr/local/zabbix/etc/zabbix_server.conf 176:### O ...

  8. jquery.validate.unobtrusive.js插件作用

    在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.valida ...

  9. ***CI查询辅助函数：insert_id()、affected_rows()

    查询辅助函数 $this->db->insert_id() 这个ID号是执行数据插入时的ID. $this->db->affected_rows() Displays the ...

  10. PUSHA/PUSHAD

    http://124.16.151.186/docs/optimization/VTune(TM) User's Guide/mergedProjects/analyzer_ec/mergedProj ...