生成二維碼:
引入:
1 , jquery.js
2 , jquery-qrcode.js
var options = {
render: 'canvas', //輸出方式 canvas | image | div
ecLevel: 'H', //容錯(cuò)級(jí)別 L | M | Q | H
minVersion: 20, // 顆粒粗細(xì)度 范圍 1 - 40
fill: '#666666', // 填充顏色
background: '#fff',//背景色 null
text: "今天是你的生日,我的祖國(guó)!", //文字
size: 150, //大小,由于是正方形,所以只需要指定一個(gè)長(zhǎng)度就可以.
radius: 0.2, //圓角 0 - 0.5
quiet: 0, // 二維碼相對(duì)于畫布的比例. int
mode: 0, // 顯示類型
// 0 Normal 只顯示一個(gè)二維碼
// 1 Label-Strip 文本 是一個(gè)條狀
// 2 Label-Box 文本 塊狀
// 3 Image-Strip 圖像 條狀 適合扁條型的圖像
// 4 image-Box 圖像 塊狀 適合展示 長(zhǎng)寬比例差不多的圖像
mSize:0.3, // 文本 或圖像 所占二維碼比例.范圍0.1-0.9
mPosX: 0.5, // 文本或圖像相對(duì)二維碼的X軸位置. 范圍0-1 0表示靠左對(duì)齊,1表示靠右對(duì)齊
mPosY: 0.5, // 文本或圖像相對(duì)二維碼的X軸位置. 范圍0-1 0表示靠頂端對(duì)齊,1表示靠底端對(duì)齊
label:null, //文本內(nèi)容
fontname: null, // 文本字體
fontcolor: 'red', //文本顏色
image:null // 圖片對(duì)象
};
$('#ouput').qrcode(options);
問題 一 :
image 里怎么傳對(duì)象?
我使用了相對(duì)地址傳 "xx.jpg" ...失敗...
我又新建了個(gè)img標(biāo)簽
<img id="abc" src="xx.jpg"/>
, 我寫$("#abc")失敗.
官方給出的dome, 也使用了 img標(biāo)簽來傳對(duì)象.. 不過寫成了 $("img#abc")[0] , 成功!!!
但BUG出現(xiàn)了....頁面加載時(shí), logo的地方是一片空白...
原因也很簡(jiǎn)單 : 頁面加載時(shí), 圖像還沒有完全被瀏覽器加載上, 就被canvas渲染到界面上了..so,下面是我的改法..
<!DOCTYPE html>
<html>
<head>
<title>二維碼</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-qrcode.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var heavyImage = new Image();
heavyImage.src = "PDF.png";
heavyImage.onload = function () {//圖片加載完畢,再執(zhí)行生成二維碼的動(dòng)作.
$("#output").qrcode({
render: 'canvas',
ecLevel: 'H',
size: 150,
text: '上海已進(jìn)入燒烤模式,\\'請(qǐng)為自己"帶鹽"\\'',
mSize: 0.3,
mode: 4,
image: heavyImage
});
$("#output").qrcode({
render: 'canvas', //輸出方式 canvas | image | div
ecLevel: 'H', //容錯(cuò)級(jí)別 L | M | Q | H
text: "https://www.baidu.com", //文字
size: 250, //大小,由于是正方形,所以只需要指定一個(gè)長(zhǎng)度就可以.
mode: 4, // 顯示類型
mSize: 0.3, // 文本 或圖像 所占二維碼比例.范圍0-40
mPosX: 0.50, // 文本或圖像相對(duì)二維碼的X軸位置. 范圍0-100 0表示靠左對(duì)齊,100表示靠右對(duì)齊
mPosY: 0.50, // 文本或圖像相對(duì)二維碼的X軸位置. 范圍0-100 0表示靠頂端對(duì)齊,100表示靠底端對(duì)齊
image: heavyImage // 圖片對(duì)象
});
}
});
</script>
</head>
<body>
<div id="output">
</div>
</body>
</html>
==========================
以下內(nèi)容和上方無關(guān)
**二維碼格式**
類型
說明
文本 text
直接生成，無需處理
網(wǎng)址 url
直接生成，無需處理（如果前綴加上url:
在微信中不能自動(dòng)跳轉(zhuǎn)）
名片 mecard
MECARD:N:小明;TEL:13723456789;EMAIL:payonesmile@qq.com;ADR:廣州天河區(qū);ORG:xx有限公司;URL:http://pro.wwei.cn/;NOTE:QQ：13783821;
電話 tel
tel:13723456789
郵箱 mail
mailto:payonesmile@qq.com
短信 sms
smsto:13723456789:短信內(nèi)容
無線網(wǎng)絡(luò) WIFI
WIFI:S:CMCC;P:123456;T:WPA/WPA2;
**2、二維碼糾錯(cuò)級(jí)別**
糾錯(cuò)級(jí)別越高，生成圖片會(huì)越大。
L 水平 7%的字碼可被修正
M 水平 15%的字碼可被修正
Q 水平 25%的字碼可被修正
H 水平 30%的字碼可被修正
