對于不想細(xì)看canvas的童鞋坏瘩，用html2canvas還是很方便噠~
<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
...// 海報內(nèi)容
</div>
<div id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>
海報內(nèi)的內(nèi)容加載完成后執(zhí)行下面方法：
generateImage = () => {
let htmlDom = document.getElementById('sharePicBox');
if(htmlDom){
html2canvas( htmlDom , {
allowTaint: false, //允許污染
taintTest: true, //在渲染前測試圖片(沒整明白有啥用)
useCORS: true, //使用跨域
background: "#fff",
}).then(function(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png");
image.style.width = '100%';
let container = document.getElementById('container');
container.appendChild(image);
let parent = htmlDom.parentElement
if(parent){
parent.removeChild(htmlDom);
}
// callBack(); //回調(diào)
})
}
}
有時候為了大家分享海報沒有廣告嫌疑的顧慮惹资，頁面顯示會將logo和二維碼隱藏掉精置，但是長按保存或者長按發(fā)送會有l(wèi)ogo和二維碼慕嚷，如何實現(xiàn)呢苛让？先看下這張圖：
image.png
這是從側(cè)面看的頁面內(nèi)層級，這樣看，上下兩張背景圖是融為一體的，其實是兩張圖卧抗，從而實現(xiàn)海報的展示和實際保存圖片看起來不一致的需求。
如果還有其他元素看起來在海報上鳖粟，但實際保存下來不在海報上的需求社裆，那就好辦了：
<div>用絕對定位實現(xiàn)看起來在海報上，其實不在生成海報的html元素里面向图，即 id="sharePicBox" 的div里面</div>
<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
...// 海報內(nèi)容
</div>
<div id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>
