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

    xiaoxiao2022-07-05  167

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

    最新回复(0)