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

html 同时被 3 个专栏收录
3 篇文章 0 订阅
1 篇文章 0 订阅
1 篇文章 0 订阅

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

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
有问题欢迎提出建议

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值