一、使用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
分享到:
相关推荐
js实现特定字符生成二维码
一个用于生成QR码的javascript文件,来源:http://www.luqidong.com/demo/qrcode/js/qrcode.js 用法很简单 var qrcode = new QRCode(document.getElementById(div的Id), { width : 图片宽度 height : 图片高度 }...
前端字符串生成二维码并显示在页面上,qrcode.js——网页版,weapp-qrcode.js——微信小程序版。温馨提示:本人以防文件丢失上传备份,非诚勿扰,谢谢
把字符串生成二维码,并以Base64 URL形式输出。 文章 http://blog.csdn.net/zhyl8157121/article/details/51726011 的引用资源。
二维码生成所需要的js相关的文件,在html页面引入需要的js代码,输入要生成的文字,字符,字符串,代码里添加生成的图片链接,点击按钮生成,就有一个二维码的图片生成
通常我们做二维码用qrcode.js的时候会出现中文乱码这个情况,只是因为本身qrcode.js这个包没有编译中文,现在调用utf16to8.js可以解决这个问题啦!经过本人测试时没问题的,如果有问题,可以私信联系我的!
下面记录的是小程序中生成二维码图片这一操作,用的是原文作者改版后的生成二维码工具weapp-qrcode.js(demo的众多文件中只需将util下的这个文件拷贝到自己项目中),可在原文地址里clone demo。 截图(copy原文) ...
js扫码支付pc端,请求到数据字符串生成支付二维码,扫码支付pc端
现如今,二维码无处不在,扫一扫送抽纸,那么基于js二维码是如何生成的呢?面对这一问题,下面小编给分享一代码介绍javascript生成二维码图片小结,感兴趣的朋友一起学习吧
可以从qml传数据给C++,再通过C++处理数据形成想要的二维码。 顺便想吐槽一下,网上的资料坑的不少,连个图片刷新都有坑,没成功还发了博文。
将一个字符串(可以是中文,在生成二维码图片之前将中文转码)生成二维码图片,如果想要带log的二维码,可以在生成后的二维码中间部位自己添加一个小log,log图片不要太大,不然就扫描不出内容了。 代码如下: <...
使用一个js就能生成二维码 轻松搞定 文档里面有demo
qrcode包就是一个可以将字符串画出二维码的jquery包,这个里面包含了jquery1.8.3和qrcode以及jquery_qrcode包,在用的时候按照上面的顺序依次加载就可以了。调用方法qrcode()
qrcode包就是一个可以将字符串画出二维码的jquery包,这个里面包含了jquery1.8.3和qrcode以及jquery_qrcode包,在用的时候按照上面的顺序依次加载就可以了。调用方法qrcode()
你可以输入数字、字母组成的非汉字的字符串,动态的生成一维条形码
javascript根据字符串生成条形码与二维码
支持自定义二维码渲染规则,可通过 getModules 方法得到矩阵信息后,自行实现canvas渲染二维码,如随机颜色、圆点、方块、块与块之间的间距等,详情见示例中的 custom。 支持nvue生成,但暂不支持保存。 联系方式:...
前端生产二维码的js,测试过了能用,$('#qrcode').html('').qrcode({ text: "生成二维码的字符串"});
qrcode包就是一个可以将字符串画出二维码的jquery包,这个里面包含了jquery1.8.3和qrcode以及jquery_qrcode包,在用的时候按照上面的顺序依次加载就可以了。调用方法qrcode()
今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能。后来在项目...