Vue 爬坑之旅 -- 动态合成分享海报时需要注意的几个问题

前段时间有写过一篇生成分享二维码然后在和背景图一起合成成为一张海报的文章，Vue 爬坑之旅 – 生成分享二维码和合成分享海报的方法及踩坑历程，当时这个功能是用 qrcode 先生成二维码然后将二维码用定位的方式放在背景图片上面，然后使用 html2canvas 来将二维码和背景图合成为一张分享海报。

在上周又接到了一个差不多的需求，也是要生成一张分享海报，这次的不同点在于出了二维码之外，还有其他的信息是通过接口获取的，更为关键的是从接口获取的信息里面还有一个是图片链接，要先将这个图片和其他信息显示出来，再将它们和背景图一起合成成为一张分享海报以方便用户分享。

刚拿到这个需求的时候我以为很简单，还是像上次那样用 html2canvas 合成就完了，事实证明我还是想的太简单了。如果是不加处理在接口数据返回后就直接调用 html2canvas 合成的话会发现合成是有问题的。

问题的可能表现形式有只有一张背景图，其它信息没有合成到图上。或者合成后的图片是一片空白，显示不出来等等。因为我当时做这功能的时候尝试了很多方法，碰到的问题也很多，已经记不清哪种情况是哪种错误了，，，

这里将使用 html2canvas 合成图片时要注意的几点列下，大家可以各自对照自己是哪种情况

1. 合成图片用的容器一定要先写好，不能用条件渲染，不然 html2canvas 会报错，也就是说容器元素不要用 v-if 条件渲染
2. 如果要合成的容器里面有动态的图片（通过 URL 来显示的图片），一定要等这些图片全部加载完成后在调用 html2canvas 的合成方法，不然合成的图片会有问题
3. 如果要合成的容器里面有动态的图片（通过 URL 来显示的图片），需要开启图片跨域才能正常合成。首先是图片服务器要开启跨域访问，然后就是 html2canvas 要开启跨域功能，二者缺一不可
4. 如果发现合成出来的图片有多出的一点白边，可以在 html2canvas 的 option 里面将 backgroundColor 设置为 null 以消除白边
5. 最好是在数据请求成功后延迟一点再开始合成图片，因为从拿到数据到页面渲染出来需要一点时间

上面就是在使用 html2canvas 时需要注意的地方，下面就贴出核心代码，这段代码就是先判断图片全部加载完成后再开始合成海报的代码

//在动态图片全部加载完成后用 html2canvas 合成分享海报
        let mulitImg = [this.signUpPoster.pic, this.signUpPoster.url]
        let promiseAll = [], img = [], imgTotal = mulitImg.length;
        for(let i = 0 ; i < imgTotal ; i++){
          promiseAll[i] = new Promise((resolve, reject)=>{
            img[i] = new Image()
            img[i].src = mulitImg[i]
            img[i].onload = function(){
              //第i张加载完成
              resolve(img[i])
            }
          })
        }
        Promise.all(promiseAll).then((img)=>{
          let poster = document.getElementById('signUpPoster')
          //开启跨域，去除背景色
          html2canvas(poster,{useCORS:true,backgroundColor:null}).then(canvas => {
            this.posterDataUrl = canvas.toDataURL('image/png')
          });
        })

把上面代码里面的变量替换成自己代码里面的相关的变量就可以使用。