使用jquery-qrcode生成二维码
一、使用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
使用jquery-qrcode生成二维码的更多相关文章
- 使用jquery.qrcode生成二维码及常见问题解决方案
转载文章 使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...
- 使用jquery.qrcode生成二维码实现微信分享功能
前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...
- 使用jquery.qrcode生成二维码(转)
jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...
- (转)js jquery.qrcode生成二维码 带logo 支持中文
场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...
- jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。
生成二维码 引用 jquery.qrcode.js :连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js .https:// ...
- 使用jquery.qrcode生成二维码支持logo,和中文
/* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...
- jquery.qrcode 生成二维码带logo
<div id="container">这里是二维码显示位置</div> <script language="JavaScript" ...
- jquery.qrcode生成二维码支持中文
基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...
- qrcode.react和jquery.qrcode生成二维码
qrcode.react 1.安装 npm install qrcode.react 2.用法(这里用的ant design) import React from 'react'; import QR ...
- qrcode 生成二维码
qrcode 生成二维码 Demo: https://www.hgnulb.cn/freedom/qrcode/qrcode.html qrcodeGithub 地址: https://github. ...
随机推荐
- linux建立文件夹软连接
linux建立文件夹软连接,并强制覆盖 ln -sfn /home/var/log/httpd/logs logs 这将在当前目录下建立logs软连接,指向/home/var/log/httpd/lo ...
- window系统下,简单的FTP上传和下载操作
先假设有一FTP服务器,FTP服务器:qint.ithot.net,用户名:username 密码:user1234.在本地电脑D:盘创建一个文件夹"qint".将要上传的文件 ...
- Alamofire 的使用
最近,AFNetworking 的作者Mattt Thompson提交了一个新的类似于 AFNetworking 的网络 基础库,并且是专门使用最新的 Swift 语言来编写的,名为:Alamofir ...
- Android界面组件的四种启动方式
Android界面组件启动有四种方式 standard,singleTop,singleTask,singleInstance. standard:每次调用都会都会产生新的组件. singletop: ...
- cordova IOS源码浅析
cordova封装了一套js和OC通信的代码,cordova.js下的iOSExex是关键的js去调原生的发起点. function iOSExec() { var successCallback, ...
- 【转载】LR提交JSON格式的请求
需求: 测试一个“修改用户铜板”的接口,这个接口接收JSON格式的请求,返回JSON格式的结果: 必须用PUT方式提交请求: 提交内容: {"method":"modi ...
- Java 实现函数回调
在Java里没用委托(delegate)这方法,所以想要实现回调还是有些麻烦.(想了解C#如何实现?请查看:http://www.cnblogs.com/Martin_Q/p/4478494.html ...
- [CC]手动点云分割
CloudCompare中手动点云分割功能ccGraphicalSegmentationTool, 点击应用按钮后将现有的点云分成segmented和remaining两个点云, //停用点云分割功能 ...
- delphi 导出xml文件
procedure TfrmTallageDetail.ToolButton1Click(Sender: TObject); var Xml: TXMLDocument; Rootbusiness,R ...
- 设计模式学习笔记c++版——单例模式
特别注意单例模式c++实现在main.cpp中引用的时候要去申明下: Singleton * Singleton::m_Instance = NULL; //定义性声明 不然会报错:无法解析的外部符号 ...