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

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

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

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

支持的功能主要有:

  1. text     : "https://github.com/jeromeetienne/jquery-qrcode"  //设置二维码内容
  1. render   : "canvas",//设置渲染方式
  2. width       : 256,     //设置宽度
  3. height      : 256,     //设置高度
  4. typeNumber  : -1,      //计算模式
  5. correctLevel    : QRErrorCorrectLevel.H,//纠错等级
  6. background      : "#ffffff",//背景颜色
  7. foreground      : "#000000" //前景颜色

使用方式非常简单

  1. 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,具体代码如下:

  1. function utf16to8(str) {
  2. var out, i, len, c;
  3. out = "";
  4. len = str.length;
  5. for(i = 0; i < len; i++) {
  6. c = str.charCodeAt(i);
  7. if ((c >= 0x0001) && (c <= 0x007F)) {
  8. out += str.charAt(i);
  9. } else if (c > 0x07FF) {
  10. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  11. out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
  12. out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
  13. } else {
  14. out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
  15. out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
  16. }
  17. }
  18. return out;
  19. }

即添加此函数,并将转码的字符串调用此函数,即可。

JS生成二维码,允许中文转码的更多相关文章

  1. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  2. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  3. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  4. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  5. java和js生成二维码

    1. java生成二维码 1.1 依赖jar包配置(使用maven依赖) <dependency> <groupId>com.google.zxing</groupId& ...

  6. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  7. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  8. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...

  9. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  10. qrcode.js生成二维码因字符串过长而报错

    前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...

随机推荐

  1. 第一章 Java的I/O演进之路

    I/O基础入门 Java的I/O演进 第一章 Java的I/O演进之路 1.1 I/O基础入门 1.1.1 Linux网络I/O模型简介 根据UNIX网络编程对I/O模型的分类,UNIX提供了5中I/ ...

  2. javascript 字符串总结

    match():查找字符串中特定的字符,如果找到这个字符,则返回这个字符: indexOf():定位这个字符串中某一个指定的字符首次出现的位置: sub():把字符串显示为下标: sup():把字符串 ...

  3. Scrapy--1安装和运行

    1.Scrapy安装问题 一开始是按照官方文档上直接用pip安装的,创建项目的时候并没有报错, 然而在运行 scrapy crawl dmoz 的时候错误百粗/(ㄒoㄒ)/~~比如: ImportEr ...

  4. [ios学习笔记之视图、绘制和手势识别]

    一 视图 二 绘制 三 手势 00:31 UIGestureRecognizer 抽象类 两步 1添加识别器(控制器或者视图来完成) 2手势识别后要做的事情 UIPanGestureRecognize ...

  5. WordPress登陆页和后台面空白解决方法

    真没想到我居然也会碰到这么蛋疼的事情,有一天我登陆博客,输入账号密码之后登陆没有反应,之后我就试着用首页前台登陆(因为这个模板前台带登陆功能),之后成功登陆进入后台更新文章.我想算了.这小毛病就丢那吧 ...

  6. 版本控制简介,git使用----使用GitHub托管代码

    关于版本控制: 很久以前,人们苦于对写过的代码进行版本的管理,经常过了一段时间想恢复原来写过的代码却又忘了不知道丢到哪儿去了,有的人用加上时间后缀来命名文件的方法,便于后期维护,但是这样做的麻烦也很大 ...

  7. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  8. Eclipse 创建maven项目

    新建maven project

  9. FastReport 自定义数据集

    1.可以自定义一个新的数据源   参考: internal class VirtualDataSource : DataSourceBase {    private int FVirtualRows ...

  10. Linux 设备驱动程序 proc

    不能再简化了 #include<linux/module.h> #include<linux/init.h> #include<linux/proc_fs.h> i ...