<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>99公益活动</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="format-detection" content="telephone=no">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport">
<link rel="stylesheet" type="text/css" href="/css/common.css?v=000" />
<link href="/style/dialog.css" rel="stylesheet" />
<style>
#render {
min-height: 100vh;
}
.container_public{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
.header_img {
width: 80px;
height: 80px;
overflow: hidden;
margin-top: 123.5px;
}
.header_img img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.nickname {
text-align: center;
font-size: 13px;
font-weight: bold;
margin-top: 14px;
color:#000000;
text-align:center;
}
.code_img {
width: 127.5px;
height: 127.5px;
margin:auto;
border: 2px solid #808080;
margin-top: 166px ;
}
.code_img img{
width: 100%;
height: 100%;
}
#share {
position: absolute;
left: 0;
top: 0;
z-index: 100;
}
</style>
</head>
<body>
<div id="render" >
<div class="container_public">
<div class="header_img" ></div>
<span class="nickname" ></span>
</div>
<div class="code_img"></div>
</div>
</body>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/common.js?v=20190821001"></script>
<script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.min.js"></script>
<script>
$(function () {
var cachedata = sessionStorage.getItem('activityUserInfo');
var showdata = {};
try {
if (cachedata) {
showdata = JSON.parse(cachedata);
}
} catch (e) {
}
console.log('showdata', showdata);
$('.nickname').text(showdata.NickName);
var oimg = document.createElement('img');
var headerUrl = imgUrlTypeChange(showdata.Photo);
oimg.src = headerUrl;
$('.header_img').append(oimg);
var codeUrl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + (JSON.parse(showdata.Ticket)).ticket;
var codeTyedUrl = imgUrlTypeChange(codeUrl);
var cimg = document.createElement('img');
cimg.src = codeTyedUrl;
$('.code_img').append(cimg);
html2canvas(document.querySelector("#render"), {
useCORS: true,
}).then(function (canvas) {
document.body.appendChild(canvas);
// 把画布内容放到img里面
$('#share').css({
width: '100%',
height: 'auto',
});
// 插入img
var img = document.createElement('img');
img.id = 'share';
img.width = $(window).width();
img.src = $('canvas')[0].toDataURL();
$('body').append(img);
$('canvas').hide();
});
})
//window.btoa（ base64）
function imgUrlTypeChange(url) {
if (url) return 'http://api.lxisland.cn/api/imagehelper/' + window.btoa(url);
return '';
}
</script>
</html>
网友评论