jquery.qrcode.js生成多尺寸二维码带logo及文字描述并打包下载

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>

效果图如下