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