对于不想细看canvas的童鞋，用html2canvas还是很方便哒~
<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
...// 海报内容
</div>
<div id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>
海报内的内容加载完成后执行下面方法：
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(); //回调
})
}
}
有时候为了大家分享海报没有广告嫌疑的顾虑，页面显示会将logo和二维码隐藏掉，但是长按保存或者长按发送会有logo和二维码，如何实现呢？先看下这张图：
image.png
这是从侧面看的页面内层级，这样看，上下两张背景图是融为一体的，其实是两张图，从而实现海报的展示和实际保存图片看起来不一致的需求。
如果还有其他元素看起来在海报上，但实际保存下来不在海报上的需求，那就好办了：
<div>用绝对定位实现看起来在海报上，其实不在生成海报的html元素里面，即 id="sharePicBox" 的div里面</div>
<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
...// 海报内容
</div>
<div id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>
