js截屏（日常需求）

今天遇到一个需求，就是把分享海报通过微信，完整的分享出去，首先这个分享海报是由两部分组成，一个是海报本身，一个是带参数的二维码，由于后端没有拼接，所以分享出去的只是单独的二维码，

一

首先，我就知道我还做不到单凭前端技术完成两张图片无缝拼接；但是遇到问题总不能放任不管吧，于是牺牲了我一顿中午饭和午休；可能是我搜索的关键词不对，并没有所收获，既然技术不到位，就只好另辟蹊径

二

我想到的第一种方法是给img标签设置背景图片，在通过定位和设置大小达到预定我位置；当我以为可以解决问题的时候；给img标签加入src的时候底层的背景色就被遮挡了。z_index也没效果，显然是失败了

三

紧接着，我想到了::after和::before伪类；虽然视觉上是达到了效果，但是我去看页面渲染的代码时，demo显然是两个节点；
如果能和上一种方法互补一下就好了，然后又继续发散我的思维，

四

最后，既然我不可能给他写一个拼接图片的功能；那就只好避重就轻，对就是截屏，但不是用户主动自己截屏，这样会很反感，然后又是一顿百度，结果还是没找到原生的方法调用移动端截屏的方法，所幸发现了一个插件html2canvas可以截屏，因为第一次用，也不知道效果，简单创建了一个html，最爱的copy环节到了，下载好插件包，引入，再把copy的代码调整；果然可以，然后就放入自己的项目里面；具体代码如下：

1.首先引入下载好的js插件
<script src="../../js/html2canvas.js"></script>
2.然后创建demo：
<!--  截屏demo 需要注意ref是必须的 -->
 <div class="huod"  ref="imageDemo" :style="{backgroundImage: 'url(' + activityImg + ')'}">
        <img :src="fileurl" alt="">
 </div>
<!--  截屏容器  -->
<img id="demo" :src="htmlUrl">
3.操作节点
toImage () {
                // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
                html2canvas(this.$refs.imageDemo, {
                    backgroundColor: null,   //设置截图的背景色
                    useCORS: true, // 解决文件跨域问题
                    allowTaint: false, //允许跨域
                    taintTest: true, //是否在渲染前测试图片
                }).then((canvas) => {
                    let url = canvas.toDataURL('image/png');//指定转换格式可不填
                    this.htmlUrl = url;
                    //提示弹窗
                    alert(截屏成成功）
                })
            },
4.调用方法,我用的是vue框架，只需要在生命周期调用就是了
 mounted:function () {
    this.toImage ()
}

最后注意，ios可能有点兼容问题，可能是css布局引发的，我在安卓上看是正常的，ios上就出现了混乱，但最后我调节了样式，然后就可以了。注意我是把截屏的容器定位覆盖了原先的demo，所以外行根本看不出来，而且是页面加载就完成了截屏，反正需求的效果是完成了的，这就是技术解决不了的需求，全凭小脑来填充了