html转图片html2canvas拼接动态二维码及下载

标题html转图片拼接动态二维码

• 需要的js
• 相关js 官网 http://html2canvas.hertzen.com/
• github地址 https://github.com/niklasvh/html2canvas/
• qrcode.js地址 http://davidshimjs.github.io/qrcodejs/

function getQrCodes(mod_type,mod_id,tpl_use,cos_id,itm_id,val,lang,ils_id,top_title,course_title,class_value,date_time,effective_time,end_time){
    var htmlTemplate = "";
    var title = "";
    var link = "";
    var qrcontent="";
    var url = window.location.protocol +"//" + window.location.host + "/";
    var head = "";
    // var checkInTime= date_time+" "+_wbModuleGetTimeHHmm(effective_time)+"-"+_wbModuleGetTimeHHmm(end_time)
     if(val === 3){
        // lang = lang === 'zh-cn' ? 'gb' : lang === 'zh-hk' ? 'ch' : 'en';
        // link = url+"mobile/views/course/detail.html?itm_id="+itm_id+"&ils_id="+ils_id+"&tkhId=&type=COS&wx=true";
        qrcontent = itm_id+'[|]'+ils_id;
        title = top_title+fetchLabel('wb_msg_' + lang + '_detail_6');
		head =course_title;
    }
    //写的很low莫要见怪 value= '"+fetchLabel('wb_msg_' + lang + '_detail_8')用于国际化的值，可以自定义

    var success = "<div style='margin-top: 20px' id='canvas'>"
    	+"<div id='qrcodelst' class='qrcodelst' style='height:350px;width:300px;border:1px solid rgba(197,210,181,0.7) ;border-radius:20px;margin:auto ;background-color: #ffffff;'>"
        +"<h4 style='margin-top:20px;' align='center'>"+head+"</h4>"
        +"<h6 style='margin:auto;line-height: 20px;font-weight: bold'align='center'>"+fetchLabel('wb_msg_' + lang + '_detail_1')+"</h6>"
        +"<h6 style='margin:auto;line-height: 20px;'align='center'>"+class_value+"</h6>"
        +"<h6 style='margin:auto;line-height: 20px;font-weight: bold'align='center'>"+fetchLabel('wb_msg_' + lang + '_detail_2')+"</h6>"
        +"<h6 style='margin:auto;line-height: 20px;'align='center'>"+top_title+"</h6>"
        +"<h6 style='margin:auto;line-height: 20px;font-weight: bold'align='center'>"+fetchLabel('wb_msg_' + lang + '_detail_3')+"</h6>"
        +"<h6 style='margin:auto;line-height: 20px;'align='center'>"+checkInTime+"</h6>"
        +"<div id='qrcode' style='height:138px;width:138px;margin:auto;'></div>"
        +"<h6 style='margin:auto;line-height: 20px;'align='center''>"+fetchLabel('wb_msg_' + lang + '_detail_4')+"</h6>"
		+"</div>"
		+"<div style='border:1px rgba(197,210,181,0.7);height:2px'>"
		+"</div>"
        +"<div align='center'>"
        +"<input type='button' onclick='downloadQrcode(1);' value='"+fetchLabel('wb_msg_' + lang + '_detail_5')+"' class='btn wzb-btn-blue margin-right4'/>"
        +"<a id='download' download='qrcode.jpg'></a>"
        +"</div>"
        +"</div>";


    var error ="<div class='losepage-3' style='margin:60px 70px;'>"
        +"<div align='right' style='margin-left:139px;'>"
        +"<div align='left' class='losepage_tit'>"+""+"</div>"
        +"<div align='left' class='losepage_info'>"+""+"</div>"
        +"<p align='left'>"
        +"  <input type='button' onclick='downloadQrcode(2);' value= '"+fetchLabel('wb_msg_' + lang + '_detail_8')+"' class='btn wzb-btn-blue margin-right4'/>"
        +"</p>"
        +"</div>"
        +"</div>";


    var titles = "";
    $.ajaxSettings.async = false; //同步
    $.getJSON("/app/resourceContent/get",{rcn_res_id : mod_id,mod_type : mod_type},function(data,status){
        if(status === "success" && data.result !== undefined && data.result){
            htmlTemplate = success;
            titles = title;
        }else{
            htmlTemplate = error;
            titles = fetchLabel('wb_msg_' + lang + '_detail_7');
        }
    });
    //弹出窗口 这里用了layui
    var width = '560px';
    var height = lang === 'en' ? titles !== 'Error' ? '500px' : '480px' : '480px';//英文状态下，因字数过长，高度应该放大
    layer.open({
        type: 1,
        area: [width, height], //宽高
        title : titles,
        content: htmlTemplate
    });
    //生成二维码输出到html页面
    jQuery('#qrcode').qrcode({
        render: "canvas", //也可以替换为table
        width: 138,
        height: 135,
        text: ils_id,
		level:'Q'
    });
}

//下载二维码
function downloadQrcode(val){
    if(val === 1){
        //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
        //html2canvas(document.querySelector('div')).then(function(canvas) {
        //    document.body.appendChild(canvas);
        //});
        //创建一个新的canvas
        var canvas2 = document.createElement("canvas");
        var   _canvas = document.querySelector('div');
        var w = parseInt(window.getComputedStyle(_canvas).width);
        var h = parseInt(window.getComputedStyle(_canvas).height);
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";

        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        var context = canvas2.getContext("2d");
        //这个偏移量可能是负值，自己适当调试
        context.translate(0，0);
        context.scale(2, 2);
        //在canvas绘制前填充白色背景，如果没有这一步会变成透明色
        context.fillStyle = "#fff";
        context.fillRect(0, 0, canvas2.width, canvas2.height);

        html2canvas(document.querySelector('#qrcodelst'), { canvas: canvas2 }).then(function(canvas) {
            //document.body.appendChild(canvas);
            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
            // document.querySelector(".download").setAttribute('href', canvas.toDataURL());
            try {//解决IE转base64时缓存不足，canvas转blob下载
                var blob = canvas.msToBlob();
                navigator.msSaveBlob(blob, 'qrcode.jpg');
            } catch (e) {//如果为其他浏览器，使用base64转码下载
                var url = canvas.toDataURL('image/jpeg');
                $("#download").attr('href', url).get(0).click();
            }
            // $("#download").attr('href', canvas.toDataURL()).get(0).click()
        });
        return false;
    }else{
        layer.closeAll();
    }
}

效果如下

参考文章地址
https://segmentfault.com/a/1190000011478657
有问题欢迎提出建议