2020-06-19 vue html2canvas
import html2canvas from "html2canvas";
<div class="tabs">
<div class="tab">
<a @click="$router.back(-1)" class="pageback"></a>
</div>
<a class="tab" v-for="(tab,index) in tabs" @click="cur=index,goAssignBlock('block'+ index,150)"
:class="{active:cur==index}" :key="tab.type">
{{tab.type}}
</a>
<div class="tab" @click="openPoster">
<span class="icon share-icon"></span>
</div>
</div>
<section class="share-poster" @click.stop="closePoster" style="display: none;">
<div class="share-poster-wrapper">
<div class="share-poster-top-tip">长按保存图片</div>
<div id="share-poster-main" @click.stop="() => void 0">
<div class="share-poster-content">
<div class="share-poster-top">
<img :src="productList.Thumb" class="share-poster-top-img" @load="loadedThumb" />
</div>
<div class="share-poster-bottom">
<div class="share-poster-bottom-title" id="poster_title">
<div style="font-size: 15px;">{{goodinfo.Title}}</div>
</div>
<div class="share-poster-bottom-price-wrapper">
<span class="share-poster-bottom-price">
<span v-for="(item,index) in priceDatalist"
v-show="changeLeftBackground == index">
<span v-if='item.payMethod=="2" ' style="font-size: 13px;">
<span>{{item.lxb}}莲香币</span>
<span>+</span>
<span>￥{{item.cash}}</span>
</span>aa
<span v-else style="font-size: 13px;">
<span>￥{{item.cash}}</span>
</span>
</span>
</span>
<span v-if="goodinfo.IsAdvance == 1" class="share-poster-bottom-advance">订金：<span
class="price">￥{{goodinfo.AdvanceResp.EarnestMoney}}元</span></span>
</div>
<div class="share-poster-bottom-code">
<span class="share-poster-bottom-qrcode"></span>
<span class="share-poster-code-tip">长按可识别图中的二维码</span>
<span class="share-poster-code-logo">
<img src="/images/lxd_logo.png" />
</span>
</div>
</div>
</div>
</div>
</div>
</section>
// 分享图片
openPoster() {
this.getShareQrcode();
},
// 关闭分享
closePoster() {
$('.share-poster').hide();
},
// 获取分享二维码
getShareQrcode() {
const _this = this;
if (!this.loadedThumbStatus) {
return
}
let productID = this.productList.ID;
if ($('.proPrice').html().length <= 0) return;
// 判断用户是否登录
if (!Boolean(getCookie('Id'))) {
Toast('您还未登录,跳转登录中...');
window.location.href = '/loginRegister/login.aspx?ReturnUrl=' + Base64.encode(window.location.href);
return;
}
$('.share-poster').show();
if ($('#share-poster-img').length > 0) return;
$(window).scrollTop(0);
$('body').css('overflow', 'scroll');
checkOverflow();
_this.toastLoading = Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true,
message: '图片合成中...',
});
axios.get("/my.ashx", {
params: {
type: 'ProductShareUser',
pid: productID,
},
responseType: 'blob'
}).then(data => {
if (data.status === 200) {
// 返回200
var blob = data.data;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64
reader.onload = function () {
var oImg = new Image();
oImg.src = this.result;
oImg.style = "width:1.12rem;height:1.12rem;pointer-events:none;"
$('.share-poster-bottom-qrcode').append(oImg);
setTimeout(() => {
_this.toastLoading.clear();
_this.mixPoster();
}, 2000)
}
}
}).catch(err => {
console.log(err)
})
},
loadedThumb() {
this.loadedThumbStatus = true;
},
mixPoster() {
html2canvas(document.querySelector("#share-poster-main"), {
useCORS: true,
scale: 2,
dpi: 192,
}).then(function (canvas) {
document.querySelector("#share-poster-main").appendChild(canvas);
// 把画布内容放到img里面
$('#share-poster-img').css({
width: '100%',
height: 'auto',
});
// 插入img
var img = document.createElement('img');
img.id = 'share-poster-img';
img.width = $('#share-poster-main').width();
img.src = $('canvas')[0].toDataURL();
$('#share-poster-main').append(img);
$('.share-poster-content').remove();
$('canvas').remove();
});
},
//定位
<section class="skip-home" @click="shipHome">
<img src="../../../../src/assets/skiphome.png" alt="">
<span>首页</span>
</section>
//定位样式
.skip-home {
width: 1.18rem;
height: 1.18rem;
background-color: rgba(206, 61, 62, .9);
border-radius: 50%;
position: fixed;
bottom: 1.14rem;
right: .24rem;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 10px 2px rgba(83, 83, 83, 0.68);
}
.skip-home img {
width: .44rem;
height: .44rem;
margin-bottom: 0.08rem;
}
.skip-home span {
color: #fff;
font-size: .22rem;
}
/* ===分享海报样式=== */
.share-poster {
/* display: none; */
position: fixed;
z-index: 500;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, .75);
-webkit-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
touch-callout: none;
-webkit-user-select: none;
}
.share-poster .share-poster-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#share-poster-main {
width: 84vw;
background-color: #fff;
overflow: hidden;
border-radius: .12rem;
position: relative;
}
.share-poster-content-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
pointer-events: none;
-webkit-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
touch-callout: none;
-webkit-user-select: none;
}
.share-poster-content-bg .share-poster-content-bg-tip {
width: 2rem;
height: .5rem;
display: block;
position: absolute;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 2px;
color: #fff;
font-size: .24rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
line-height: .5rem;
text-align: center;
}
.share-poster .share-poster-top-tip {
color: #fff;
font-size: .36rem;
margin-bottom: 15px;
text-align: center;
}
.share-poster .share-poster-top {
position: relative;
height: 76vw;
overflow: hidden;
}
.share-poster .share-poster-top-img {
width: 100%;
height: auto;
display: block;
pointer-events: none;
}
.share-poster .share-poster-bottom {
display: flex;
padding: .3rem .24rem .4rem .24rem;
flex-direction: column;
}
.share-poster .share-poster-bottom-info {
display: flex;
align-items: center;
margin-bottom: .3rem;
}
.share-poster .share-poster-bottom-title {
width: 100%;
color: #666666;
font-size: 15px;
height: .88rem;
text-align: left;
word-break: break-all;
/* margin-bottom: .3rem; */
overflow-wrap: break-word;
}
.share-poster .share-poster-bottom-title>div {
display: inline-block;
line-height: .44rem;
}
.share-poster .share-poster-bottom-price-wrapper {
color: #A40710;
font-size: .24rem;
margin-bottom: .3rem;
text-align: left;
}
.share-poster .share-poster-bottom-advance {
font-size: .22rem;
margin-left: .18rem;
}
.share-poster .share-poster-bottom-code {
display: flex;
align-items: center;
}
.share-poster .share-poster-bottom-qrcode {
display: inline-block;
width: 1.12rem;
height: 1.12rem;
flex: none;
}
.share-poster .share-poster-bottom-qrcode img {
width: 100%;
height: 100%;
pointer-events: none;
}
.share-poster .share-poster-code-tip {
color: #999999;
font-size: .2rem;
flex: 1;
text-align: center;
}
.share-poster .share-poster-code-logo img {
width: 1.04rem;
height: 1.09rem;
pointer-events: none;
}
.share-poster .mix-share-poster-img {
width: 100%;
height: auto;
display: block;
}
