html代码
<div id="qrcode"></div>
<div id="img_list"></div>
<a href="javascript:downQRCode(300);" type="png">下载300*300</a>
<a href="javascript:downQRCode(500);" type="png">下载500*500</a>
<a href="javascript:downQRCode(1000);" type="png">下载1000*1000</a>
<a href="javascript:downQRCode(0);" type="png">打包下载</a>
js代码
<script src="../scripts/jquery/jquery-1.8.0.min.js"></script>
<!--处理中文及生成二维码-->
<script src="../scripts/qrcode/utf.js"></script>
<script src="../scripts/qrcode/jquery.qrcode.js"></script>
<!--打包下载-->
<script src="../scripts/file/jszip.min.js"></script>
<script src="../scripts/file/FileSaver.min.js"></script>
<script>
var qrText = 'https://blog.csdn.net/qq_22103321',//要生成二维码的信息,文本或URL
strHeader = '二维码',//顶部文字描述
strFooter = '生成一个二维码',//底部文字描述
qrCodeSize = [300, 500, 1000],//二维码尺寸
picWidth = [20, 34, 66],//图片额外宽
picHeight = [60, 100, 200],//图片额外高
fontSize = [14, 24, 46],//描述文字大小
logoSize = [80, 110, 220],//logo图片
imgb64Arr = [];//图片集
$(document).ready(function () {
qrCodeNext(0);
})
//生成二维码
function qrCodeNext(i) {
if (i < qrCodeSize.length) {
var qrcode = $('#qrcode').qrcode({
render: 'canvas',
text: qrText ,
width: qrCodeSize[i],
height: qrCodeSize[i],
background: '#ffffff',
foreground: '#000000',
}).hide();
var canvas = qrcode.find('canvas').get(i);
//设置logo
var logo = new Image(logoSize[i], logoSize[i]);
logo.src = '/Upload/system/logo_' + logoSize[i] + '.png';
logo.onload = function () {
//设置二维码
var img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function () {
//重新绘制画布
var w = img.width + picWidth[i], h = img.height + picHeight[i];
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
//设置画布背景
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//设置文字样式
ctx.fillStyle = '#000000';
ctx.font = 'bold ' + fontSize[i] + 'px Arial';
ctx.textAlign = 'center';
//绘制顶部文字描述
ctx.fillText(strHeader, w / 2, picHeight[i] / 3);
//绘制二维码
ctx.drawImage(img, picWidth[i] / 2, picHeight[i] / 2);
//绘制logo
ctx.drawImage(logo, (w - logo.width) / 2, (h - logo.height) / 2, logo.width, logo.height);
//绘制底部文字
ctx.fillText(strFooter, w / 2, h - picHeight[i] / 5);
var data = canvas.toDataURL('image/png', 1);
//显示二维码,只显示一张
if (i == 0) {
var imgOk = new Image();
imgOk.src = data;
$('#img_list').append(imgOk);
}
imgb64Arr.push(data);
qrCodeNext(i + 1);
}
}
}
}
//打包下载二维码
function downQRCode(size) {
if (size > 0) {
for (var i = 0; i < qrCodeSize.length; i++) {
if (qrCodeSize[i] == size) {
var a = document.createElement('a');
var event = new MouseEvent('click');
a.download = size + '_' + size + '_' + strHeader + '_' + strFooter;
a.href = imgb64Arr[i];
a.dispatchEvent(event);
}
}
} else {
var zip = new JSZip();
var img = zip.folder(strHeader + '_' + strFooter);
for (var i = 0; i < qrCodeSize.length; i++) {
var b64 = imgb64Arr[i];
var b64Split = b64.split(',');
img.file(qrCodeSize[i] + '_' + qrCodeSize[i] + '_' + strHeader + '_' + strFooter + '.png', b64Split[1], { base64: true }); //获取图片文件
}
zip.generateAsync({ type: "blob" }).then(function (content) {
saveAs(content, strHeader + '_' + strFooter + '.zip');
});
}
}
</script>
效果图如下