`
suflow
  • 浏览: 169688 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JS生成二维码,支持中文字符

阅读更多

 

一、使用jquery-qrcode生成二维码

先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取),

qrcode.js 是实现二维码数据计算的核心类,

jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)


支持的功能主要有:

 

text	 : "https://github.com/jeromeetienne/jquery-qrcode"  //设置二维码内容

 

render	 : "canvas",//设置渲染方式
width		: 256,     //设置宽度
height		: 256,     //设置高度
typeNumber	: -1,      //计算模式
correctLevel	: QRErrorCorrectLevel.H,//纠错等级
background      : "#ffffff",//背景颜色
foreground      : "#000000" //前景颜色
 

使用方式非常简单

 

jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content});
 

 经过简单实践,

使用canvas方式渲染性能还是非常不错的,但是如果用table方式,性能不太理想,特别是IE9以下的浏览器,所以需要自行优化一下渲染table的方式,这里就不细述了。

 

二、JS生成中文二维码

其实上面的js有一个小小的缺点,就是默认不支持中文。

这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,

而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,

英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。

解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:

 

function utf16to8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
	c = str.charCodeAt(i);
	if ((c >= 0x0001) && (c <= 0x007F)) {
	    out += str.charAt(i);
	} else if (c > 0x07FF) {
	    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
	    out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
	    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	} else {
	    out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
	    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	}
    }
    return out;
}
 

 

参考:

https://github.com/jeromeetienne/jquery-qrcode

http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt

分享到:
评论
6 楼 sp42 2014-09-24  
LZ不仅技术好,而且文笔不错啊
5 楼 Louis_in_VW 2013-04-09  
太感谢了.我在自己的文章里引用了你的方法.谢谢~
4 楼 suflow 2013-01-10  
上面第一点有点错误,其实4x4是16个td,但是只要画一个就可以了,优化过后,ie6可以达到200ms~300ms,你可以尝试一下,用户根本不会感知到慢
3 楼 mailcatch 2013-01-09  
呵呵,谢谢博主的说明,这几天在ie上缩小二维码尺寸测试了一下,ie6的渲染还是太慢,极大的阻碍了页面的显示。真是无语。
后来又试用了一下http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/,用js生成Data URI的二维码,ie7和ie8速度可以接受了,但ie6还是只能table,真是没办法。
最后只能决定用mobil.qq.com的第三方来生成二维码,无法定制参数,但速度较快,而且不挑浏览器,默认utf8编码。
2 楼 suflow 2013-01-09  
mailcatch 写道
非常感谢博主的介绍。可惜的是ie6-8只支持table渲染方式。
1.请博主能否详细说说优化table渲染的方法,希望不要只是把尺寸设置小一些,呵呵。
2.我在js方面比较白痴,博主能否说明一下转码的代码如何使用?
谢谢!

可以从两方面入手:
一、单元格的合并,比如一个标准单元格是4x4(px),原本需要4个td,但是实际上你可以只画一个td,只需设置一下 width和height就可以了
二、table生成方式,默认是一个一个td tr节点append上去的,你可以先渲染组装完table,最后一次性append
1 楼 mailcatch 2013-01-06  
非常感谢博主的介绍。可惜的是ie6-8只支持table渲染方式。
1.请博主能否详细说说优化table渲染的方法,希望不要只是把尺寸设置小一些,呵呵。
2.我在js方面比较白痴,博主能否说明一下转码的代码如何使用?
谢谢!

相关推荐

    JS生成二维码

    总的来说,通过JavaScript生成二维码,我们可以利用`qrcode.js`这样的库轻松实现这一功能,同时保证在各种浏览器和手机端的兼容性,甚至支持中文内容。这使得JavaScript生成二维码成为网页应用和移动应用中一种实用...

    C# 根据字符串生成二维码的实例代码

    至此,我们已经完成了C#根据字符串生成二维码的完整实例。用户可以在前端输入字符串和尺寸,点击生成按钮后,服务器将生成二维码并保存到指定位置,同时在页面上显示生成结果。这个实例对于理解和学习C#中的二维码...

    html5与js生成二维码并下载到本地

    本主题聚焦于如何利用HTML5和JavaScript生成二维码并将其下载到用户本地。我们将探讨涉及的技术点、代码实现以及相关库的使用。 首先,HTML5引入了一系列新的API和元素,增强了网页的交互性和离线存储能力。在这个...

    JS生成二维码程序

    总的来说,利用JavaScript生成二维码是网页交互中的一个实用技巧,通过结合各种JS库,我们可以轻松地将动态数据转化为用户可以扫描的二维码,为网页应用增加更多互动性。在进行此类开发时,确保对库的正确引用和理解...

    java生成二维码以及二维码转base64字符串给前端

    在Java开发中,生成二维码和将二维码转换为Base64字符串是常见的需求,尤其是在与前端交互时。这个项目提供了一种方便的方式,通过Maven依赖来实现这些功能,并且包括了一个工具类,使得操作更加简单易用。接下来,...

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

    **jQuery.qrcode.js** 是一个基于JavaScript的库,专门用于在客户端生成二维码(Quick Response Code)。这个库的优势在于它不需要服务器端的支持,只需要在用户的浏览器上运行,这大大简化了生成二维码的过程,并...

    js实现特定字符生成二维码

    总的来说,使用JavaScript生成特定字符的二维码是一个相对简单的过程,主要依赖于成熟的库,并通过其提供的API进行配置和调用。理解这些基本概念和用法,就能灵活地在项目中实现二维码功能。当然,为了提供更好的...

    js生成二维码dome

    总结一下,使用H5和JavaScript生成二维码涉及以下步骤: 1. 引入jQuery和`jquery-qrcode`库。 2. 在HTML中创建一个元素用于显示二维码。 3. 使用jQuery选择该元素并调用`qrcode`方法,传入相应的配置和数据。 这个...

    jquery 生成二维码 支持中文

    总的来说,使用jQuery生成二维码并支持中文字符,主要依赖于`jquery.qrcode.js`插件,其内部处理了中文编码的问题,使得开发者可以轻松地在网页上生成含有中文内容的二维码。在实际应用中,根据项目需求,你可能还...

    通过js生成二维码的源码

    总结来说,通过JavaScript生成二维码是Web开发中的一个实用功能,它简化了数据传递的过程,提高了用户体验。通过选择合适的库,配置适当参数,我们可以轻松地在HTML页面上实现二维码的生成和管理。不过,考虑到性能...

    微信小程序将字符串生成二维码图片的操作方法

    本文将详细介绍如何在微信小程序中将字符串信息生成二维码图片的操作方法。 首先,介绍下什么是二维码。二维码(2-dimensional bar code),是由许多黑白相间的方块组成的矩形图案,通过黑白图案的不同组合编码信息...

    C#生成二维码支持中文

    在B/S架构中,我们可以将生成二维码的功能封装成一个Web API服务,接收请求并返回二维码的Base64编码,前端通过JavaScript解码并显示。而在C/S架构中,可以直接在客户端应用中调用上述代码,生成的二维码图像可以...

    js生成二维码的demo

    总的来说,这个demo提供了一个直观的教程,帮助开发者快速理解和应用JavaScript生成二维码的功能。通过这个实例,你可以了解如何将二维码集成到自己的网页项目中,无论是为了分享链接、展示信息还是其他用途。

    调用JS生成二维码,支持中文

    总结来说,通过JavaScript生成二维码是一项实用的技术,它使得网页能够实时地生成二维码,尤其是对于包含中文内容的场景,提供了便利。了解并掌握这项技术,可以帮助开发者提升用户体验,丰富网页交互功能。

    js生成二维码

    **JavaScript生成二维码详解** 在数字化信息时代,二维码已经成为日常生活中数据传输的重要载体。JavaScript作为Web开发中的重要脚本语言,提供了生成二维码的功能,这使得在网页端和线上环境无需依赖服务器端处理...

    微信小程序页面生成二维码

    生成二维码的核心库是`qrcode.js`,这是一款流行的JavaScript二维码生成库。在`wxapp-qrcode-master`压缩包中,应该包含了这个库的引用或者实现了类似功能的自定义代码。首先,你需要在项目的`json`配置文件中引入这...

    使用jquery.qrcode生成二维码(支持中文)

    使用jquery.qrcode生成二维码(支持中文) 原理:如果浏览器支持canvas,则使用canvas绘制二维码,否则使用table绘制,但是canvas效率比table高。 适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗...

    js网页生成二维码插件qrcode.zip

    **JS网页生成二维码插件Qrcode详解** 在现代网页开发中,二维码作为一种高效的信息传递方式,被广泛应用在各个场景,如分享链接、名片交换、支付凭证等。`js网页生成二维码插件qrcode`就是这样一个方便开发者快速...

Global site tag (gtag.js) - Google Analytics