jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO

描述: 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>

运行结果:

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

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

时间: 2024-09-28 20:03:34

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

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

1.下载Qrcode库源码, 下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library2.打开源码时, 部分类库可能会加载失败, 不用理会, 只需正常加载 QRCodeLib, QRCodeSampleApp 即可.3.生成时, 会提示编译出错, Error'ThoughtWorks.QRCode.Properties.Resources' does not contain a definition for

微信支付支付宝支付生成二维码的方法(php生成二维码的三种方法)

如果图简单,可以用在线生成 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xinzhenkj.com 最简单最实例的goolge开源方法 1.google开放api 代码如下: [php] view plain copy <span style="font-size:14px;">$urlToEncode="http://www.helloweba.com"; g

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

一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: $urlToEncode="http://www.jb51.net"; generateQRfromGoogle($urlToEncode); /** * google api 二维码生成[QRcode可以存储最多4296个字母数字类型的任意文本,具体可以查看二维码数据格式] * @param string $chl 二维码包含的信息,可以是数字.字符.二进制信息

c# 二维码支持中文

/// <summary> /// 生成二维码,保存成图片 /// </summary> static void Generate1(string text) { BarcodeWriter writer = new BarcodeWriter(); writer.Format = BarcodeFormat.QR_CODE; QrCodeEncodingOptions options = new QrCodeEncodingOptions(); options.DisableEC

c# ZXing 二维码 支持中文

public class QRCode { public static Bitmap QR(string content) { Dictionary<EncodeHintType, object> hints = new Dictionary<EncodeHintType, object>(); hints.Add(EncodeHintType.CHARACTER_SET, "UTF-8");//解决中文异常 QRCodeWriter writer = new

PHP和Jquery生成二维码,以及PHP生成电子名片

自从跳槽了,就没有发过博客了,很愧疚,我是自学的PHP,现在这家公司加上老板才12个人,我是典型的从分工明确的公司跳槽到小公司,深刻体会到了所谓'大公司'和'小公司'的区别,上一个公司,一个项目到我这里,静态页都是写好的,我只需要将数据动态加载就行了,但是目前这个公司,典型的一个人当几个人用,我刚去公司一个多月,直接让我做项目经理的工作,去甲方公司需求调研,然后自己开发,除开设计和切图,我基本上都参与.锻炼人说实话还是小公司较好,但是锻炼技术我觉得还是大公司较好,因为我在我上一家公司呆了3个月,

java生成二维码的几种方式

1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/downloads/28391/qrcode.zip 这个是日本人写的,生成的是我们常见的方形的二维码 可以用中文 如:5677777ghjjjjj 2: 使用BarCode4j生成条形码和二维码 BarCode4j网址:http://sourceforge.NET/projects/barcode

.net 生成二维码

要用到一个类:QRCodeEncoder 这个类要添加一个动态库:ThoughtWorks.QRCode.dll(笔者不知道怎么上传附件,读者可以上网搜索,也可以给笔者留言) 然后引入命名空间:using ThoughtWorks.QRCode.Codec;   好了,项目开始. 首先,声明一个 QRCodeEncoder 类实例: QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();   设置编码方式: qrCodeEncoder.QRCodeE

Asp.Net Core在线生成二维码

前言: 原先用zxing Code写过基于Winfrom的批量生成二维码工具,以及单个生成二维码工具:批量生成二维码Gihub源代码 今天尝试用QRCoder 加 Asp.Net Core 写了一个在线生成二维码的例子,并且保存图片到Ubuntu系统: 代码: 生成二维码所需要用到的包:QRCoder 根据Github上的源代码,引用NuGet包 PM> Install-Package QRCoder 根据传入的参数,生成二维码,并且保存图片 public static void QRCode(

iOS中如何生成二维码

首先导入框架 然后通过滤镜CIFiter生成二维码 #import <CoreImage/CoreImage.h> /** *  生成二维码 */ - (void)creat { //1.创建过滤对象 CIFilter *filter = [CIFilter filterWithName:@"CIQRCodeGenerator"]; //2.设置相关属性 [filter setDefaults]; //3.设置输入数据 NSString *inputData = @&quo