描述： 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. 【python】继承时注意事项

    1. __init__ 注意事项 如果父类有__init__函数,子类没有,则子类自动调用父类__init__函数 如果父类有__init__函数,子类也有,则子类必须主动调用父类__init__函数 ...

  2. Maven使用笔记（三）Maven的工作原理

    概述 Maven是一个项目管理工具,他包含了一个项目对象模型,一组标准集合,一个项目生命周期,一个依赖管理系统和用来运行定义生命周期阶段中插件目标的逻辑. Maven是基于约定优于配置的思想来管理代码 ...

  3. tty相关内容

    参考文章: http://blog.csdn.net/goodluckwhh/article/details/13368279

  4. WebRTC源码分析四：视频模块结构

    转自:http://blog.csdn.net/neustar1/article/details/19492113 本文在上篇的基础上介绍WebRTC视频部分的模块结构,以进一步了解其实现框架,只有了 ...

  5. ServletContext与ServletConfig的详解及区别

    转自http://hi.baidu.com/huaxuelili/item/1704a03dbb5cd7f22784f4c6 一.ServletContext详解ServletContext是serv ...

  6. Android常用布局

    FrameLayout(框架布局):从屏幕的左上角开始显示对象,一个覆盖一个,主要用于选项卡视图和图像切换器.# 所有的组件都放在屏幕的左上角,并且以层叠进行显示. LinearLayout(线性布局 ...

  7. SU Demos-02Filtering-05Suk1k2filter

    本人数学不咋地,本demo也是一知半解,敬请谅解. 这是生成的脉冲数据

  8. 自爽：DOTNET 笔试题

    2-3年经验估计,求轻拍~ 在多态中,经常用到virtual和abstract,请问区别是什么?并描述其适用场景. 请描述Action,Action<T>,Func<T>,Fu ...

  9. LightOJ1013 Love Calculator（DP）

    容易猜测到包含s1.s2序列的串的最短长度是LCS(s1,s2) + ( len(s1) - LCS(s1,s2) ) + ( len(s2) - LCS(s1,s2) ) ,即: len(s1)+l ...

  10. DelPhi学习网站

    http://www.2ccc.com/downloads.asp?subcatalogid=101&pageid=14 http://www.2ccc.com/ http://www.xue ...