jquery-qrcode js生成二维码,完美解决 json

时间:2022-11-18 22:55:03

在项目中需要使用在前端通过js的方式生成一个二维码,二维码内容为后台传过来的json数据,数据中包含了中英文,引号等信息,直接使用github中的jquery-qrcode.js发现生成的二维码根本无法扫描出来,一看最后更新时间为4年前。最后遍寻解决方案无果,只好请教google。

解决方案很简单,使用官网的js就ok,中文乱码问题也无需转码,直接迎刃而解。
官网地址
https://larsjung.de/jquery-qrcode/



Options

The available options and their default values are:

{
// render method: 'canvas', 'image' or 'div'
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,

// error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'L',

// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,

// size in pixel
size: 200,

// code color or image element
fill: '#000',

// background color or image element, null for transparent background
background: null,

// content
text: 'no text',

// corner radius relative to module width: 0.0 .. 0.5
radius: 0,

// quiet zone in modules
quiet: 0,

// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,

mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,

label: 'no label',
fontname: 'sans',
fontcolor: '#000',

image: null
}

Examples

Default values

Doesn’t make much sense, since it encodes the text: ‘no text’

$(selector).qrcode();

Customized

Some values changed

$(selector).qrcode({
"size": 100,
"color": "#3a3",
"text": "http://larsjung.de/qrcode"
});

Same as above but rendered as div. The size of QR code might be slightly smaller than the desired size to make it pixel perfect. In this case it will be centered inside a container element with the desired sizes.

$(selector).qrcode({
"render": "div",
"size": 100,
"color": "#3a3",
"text": "http://larsjung.de/qrcode"
});

附官方demo

https://release.larsjung.de/jquery-qrcode/jquery-qrcode-0.12.0.zip