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});
即jQuery("#div的id名").qrcode(要转成二维码的东西);
经过简单实践,
使用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;
- }
即添加此函数,并将转码的字符串调用此函数,即可。
JS生成二维码,允许中文转码的更多相关文章
- 使用jquery.qrcode.js生成二维码
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
- js生成二维码以及点击下载二维码
js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...
- Java与JS生成二维码
1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...
- js生成二维码的jquery组件–qrcode
js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...
- java和js生成二维码
1. java生成二维码 1.1 依赖jar包配置(使用maven依赖) <dependency> <groupId>com.google.zxing</groupId& ...
- js生成二维码 qrcode
js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...
- QRCode.js生成二维码
QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...
- php--------使用js生成二维码
php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...
- js 生成二维码图片
1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...
- qrcode.js生成二维码因字符串过长而报错
前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...
随机推荐
- SSH框架总结
首先,SSH是由多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框架的系统从职责 ...
- Selenium ide录制回放错误Timed out after 30000ms
[error] Timed out after 30000ms 该问题可能是速度控制条播放速度过快导致,调整播放速度至slow
- mysql数据库的导入导出
当我们在操作数据库的时候,难免会遇到数据导入导出的一些操作,今天突然学到了这个知识点,特意来给大家分享. 我用的是data的这条数据 1.使用数据 mysql> use data; Databa ...
- spring与mybatis三种整合方法
spring与mybatis三种整合方法 本文主要介绍Spring与Mybatis三种常用整合方法,需要的整合架包是mybatis-spring.jar,可通过链接 http://code.googl ...
- img的onerror事件(瑕疵+解决办法)【转】
显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的. < img ...
- JAVA中的类和接口
1.类: 类是具有相同属性和方法的一组对象的集合,它为属于该类的所有对象提供了统一的抽象描述,其内部包括属性和方法两个主要部分.在面向对象的编程语言中,类是一个独立的程序单位,它应该有一个类名并包括属 ...
- UAC在注册表中的对应位置
UAC在注册表中的对应位置 HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows/CurrentVersion/Policies/System 相关键值设置: U ...
- Permutations II 再分析
记得第一遍做这题的时候其实是没什么思路的,但是第二次的时候,我已经有"结果空间树"的概念了.这时候再看https://oj.leetcode.com/problems/permut ...
- 怎么把jdk和jRE的Javadoc文档整合到MyEclipse
有时在写代码时,需要查看javadoc文档,便于编写程序.故如何把Javadoc文档整合到MyEclipse,以便于查看呢? 解决办法: 1.在MyEclipse中菜单栏的“Windows”---&g ...
- 初学者的python学习笔记2——作业篇
这次的作业是商城展示,最开始的确是一脸懵逼,后来研究了一下网上的例子,总算是搞出来了一个(其实算是网上列子的简化版?). 最开始是想要使用字典去做,发现显示列表的时候怎么也无法实现序号和名称对应,原因 ...