第四周第四天
2016-08-05 本文已影响22人
yisky
生成二维码:
引入:
1 , jquery.js
2 , jquery-qrcode.js
var options = {
render: 'canvas', //输出方式 canvas | image | div
ecLevel: 'H', //容错级别 L | M | Q | H
minVersion: 20, // 颗粒粗细度 范围 1 - 40
fill: '#666666', // 填充颜色
background: '#fff',//背景色 null
text: "今天是你的生日,我的祖国!", //文字
size: 150, //大小,由于是正方形,所以只需要指定一个长度就可以.
radius: 0.2, //圆角 0 - 0.5
quiet: 0, // 二维码相对于画布的比例. int
mode: 0, // 显示类型
// 0 Normal 只显示一个二维码
// 1 Label-Strip 文本 是一个条状
// 2 Label-Box 文本 块状
// 3 Image-Strip 图像 条状 适合扁条型的图像
// 4 image-Box 图像 块状 适合展示 长宽比例差不多的图像
mSize:0.3, // 文本 或图像 所占二维码比例.范围0.1-0.9
mPosX: 0.5, // 文本或图像相对二维码的X轴位置. 范围0-1 0表示靠左对齐,1表示靠右对齐
mPosY: 0.5, // 文本或图像相对二维码的X轴位置. 范围0-1 0表示靠顶端对齐,1表示靠底端对齐
label:null, //文本内容
fontname: null, // 文本字体
fontcolor: 'red', //文本颜色
image:null // 图片对象
};
$('#ouput').qrcode(options);
问题 一 :
image 里怎么传对象?
我使用了相对地址传 "xx.jpg" ...失败...
我又新建了个img标签
<img id="abc" src="xx.jpg"/>
, 我写$("#abc")失败.
官方给出的dome, 也使用了 img标签来传对象.. 不过写成了 $("img#abc")[0] , 成功!!!
但BUG出现了....页面加载时, logo的地方是一片空白...
原因也很简单 : 页面加载时, 图像还没有完全被浏览器加载上, 就被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 () {//图片加载完毕,再执行生成二维码的动作.
$("#output").qrcode({
render: 'canvas',
ecLevel: 'H',
size: 150,
text: '上海已进入烧烤模式,\\'请为自己"带盐"\\'',
mSize: 0.3,
mode: 4,
image: heavyImage
});
$("#output").qrcode({
render: 'canvas', //输出方式 canvas | image | div
ecLevel: 'H', //容错级别 L | M | Q | H
text: "https://www.baidu.com", //文字
size: 250, //大小,由于是正方形,所以只需要指定一个长度就可以.
mode: 4, // 显示类型
mSize: 0.3, // 文本 或图像 所占二维码比例.范围0-40
mPosX: 0.50, // 文本或图像相对二维码的X轴位置. 范围0-100 0表示靠左对齐,100表示靠右对齐
mPosY: 0.50, // 文本或图像相对二维码的X轴位置. 范围0-100 0表示靠顶端对齐,100表示靠底端对齐
image: heavyImage // 图片对象
});
}
});
</script>
</head>
<body>
<div id="output">
</div>
</body>
</html>
==========================
以下内容和上方无关
**二维码格式**
类型
说明
文本 text
直接生成，无需处理
网址 url
直接生成，无需处理（如果前缀加上url:
在微信中不能自动跳转）
名片 mecard
MECARD:N:小明;TEL:13723456789;EMAIL:payonesmile@qq.com;ADR:广州天河区;ORG:xx有限公司;URL:http://pro.wwei.cn/;NOTE:QQ：13783821;
电话 tel
tel:13723456789
邮箱 mail
mailto:payonesmile@qq.com
短信 sms
smsto:13723456789:短信内容
无线网络 WIFI
WIFI:S:CMCC;P:123456;T:WPA/WPA2;
**2、二维码纠错级别**
纠错级别越高，生成图片会越大。
L 水平 7%的字码可被修正
M 水平 15%的字码可被修正
Q 水平 25%的字码可被修正
H 水平 30%的字码可被修正
