<template>
<div>
<img :src="posterImg" v-if="posterImg" class="poster"/>
<div id="poster" class="poster" ref="poster" v-else>
<img id="bgimg" class="bgimg" crossorigin="anonymous" :src="`${posterInfo.bg}?time=${new Date().valueOf()}`">
<img id="banner" class="banner" crossorigin="anonymous" :src="`${posterInfo.personnel_share_img}?time=${new Date().valueOf()}`">
<div id="title" class="title">{{ posterInfo.activity_name || '' }}</div>
<div id="info" class="info view2">
<div style="flex: 1;display: flex;align-items: center;">
<img id="infoavatar" class="info-avatar" crossorigin="anonymous" :src="`${posterInfo.avatar_url}?time=${new Date().valueOf()}`">
<div class="info-left">
<div class="info-name">{{ posterInfo.personnel_name }}</div>
<div class="info-dec">分享給你</div>
</div>
</div>
<img id="infocode" class="info-code" crossorigin="anonymous" :src="`${posterInfo.qr_img_url}?time=${new Date().valueOf()}`">
</div>
</div>
</div>
</template>
圖片地址后添加?time=${new Date().valueOf()},不然會報(bào)圖片跨域報(bào)錯
原因:這是因?yàn)槟鉯mg是在緩存數(shù)據(jù)中讀取的 并沒有訪問遠(yuǎn)程這個圖片的時(shí)候沒有攜帶請求頭。
確保你的圖片服務(wù)器支持CORS訪問,也就是會返回Access-Control-Allow-Origin等響應(yīng)頭;文章來源地址http://www.zghlxwxcb.cn/news/detail-784074.html
import html2canvas from 'html2canvas'
//響應(yīng)式,高度根據(jù)寬度比例響應(yīng),定位
makeDom(){
let _this = this;
this.$nextTick(function(){
let poster = document.getElementById('poster');
let posterWidth = poster.offsetWidth;
let bgimg = document.getElementById('bgimg');
let banner = document.getElementById('banner');
let title = document.getElementById('title');
let info = document.getElementById('info');
let infoavatar = document.getElementById('infoavatar');
let infocode = document.getElementById('infocode');
poster.style.height = posterWidth*1.35+'px';
bgimg.style.height = posterWidth*1.35+'px';
banner.style.top = posterWidth*0.5+'px';
banner.style.height = posterWidth*0.4+'px';
title.style.top = posterWidth*0.93+'px';
info.style.top = posterWidth*1.05+'px';
infoavatar.style.width = posterWidth*0.16+'px';
infoavatar.style.height = posterWidth*0.16+'px';
infocode.style.width = posterWidth*0.23+'px';
infocode.style.height = posterWidth*0.23+'px';
setTimeout(function() {
_this.makePoster();
},2000)
})
},
//生成圖
makePoster(){
let that = this;
html2canvas(this.$refs.poster, {
backgroundColor: '#fff',
useCORS: true,//開啟跨域
imageTimeout: 6000,
logging: true,
//allowTaint: true,
}).then(canvas => {
let dataURL = canvas.toDataURL('image/png');
let file = that.base64toFile(dataURL)
//file就是圖片,可做一個圖片上傳到自己的資源服務(wù)器
}).catch((err) => {})
},
base64toFile(dataurl, filename = "file") {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split("/")[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
},
文章來源:http://www.zghlxwxcb.cn/news/detail-784074.html
到了這里,關(guān)于html2canvas截圖生產(chǎn)海報(bào)圖片的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!