html2canvas实战

对于不想细看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和二维码，如何实现呢？先看下这张图：

这是从侧面看的页面内层级，这样看，上下两张背景图是融为一体的，其实是两张图，从而实现海报的展示和实际保存图片看起来不一致的需求。
如果还有其他元素看起来在海报上，但实际保存下来不在海报上的需求，那就好办了：

<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>