在vue中使用html2canvas首次生成海报时保存err loading image

项目场景：

在vue移动端中使用HTML2canvas生成海报点击分享到微信好友，好友扫描二维码进行操作

---

问题描述：

同事敲不完的项目让我来帮忙：在页面首次生成二维码并合并海报时，报错err loading image
页面的报错提示:

页面HTML部分：

     <!-- 爱传递生成海报区域 -->
     <div class="DivBox" ref="CDShare">
            <img class="img1" src="../../assets/images/HaveMoney/cd_shareImg.png" alt="">
            <div class="divImg">
                <img class="img2" :src="QC" alt="">
            </div>
     </div>

页面的data部分：

data () {
    return {
        sharePopupVisible: false, //是否显示分享弹框 true-显示 false-不显示
        YQsharePopupVisible:false,//助力是否显示分享弹框 true-显示 false-不显示
        showWechat: true, //是否显示微信好友 true-显示 false-不显示
        showTimeLine: true, //是否显示微信朋友圈 true-显示 false-不显示
        QC:"",//生成二维码,
        ossUrl: '', //oss生成的链接
        ImgUrl: '',//生成的海报图片路径
        canvansFalse:false,//合并隐藏
        isShare:false,
    }
},

页面逻辑代码部分：

//点击分享爱传递海报
    CD_QRcodeShare(){
        const params = {
            data: {
                activityCode: "2",
                functionUrl: 'http://slcsptest.sinosig.com/app/#/RhDetail'
            }
        };
        //二维码接口
        serviceApi
            .getShareGenerateQrCode(params)
            .then(res => {
                this.QC = "data:image/png;base64," + res.data.qrCodeBase //生成的二维码urL
                this.CDYaoqing()
            })
            .catch(err => {
            this.$messagebox({
                title: "提示",
                message: err.message
            });
        });
        
    },
    //生成爱传递海报
    CDYaoqing(){
        console.log( this.QC,'生成的二维码');
        window.pageYOffset = 0;
        html2canvas(this.$refs.CDShare, {
            backgroundColor:null,
            timeout: 500, // 加载延时
            allowTaint: true,
            useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        })
        .then(canvas => {
            this.imgUrl = canvas.toDataURL('image/png');
            //上传到OSS
            uploadOss.updateOss(this.imgUrl).then(res => {//上传OSS
                this.ossUrl = res.url;
                console.log(this.ossUrl,'海报')
         });
        });
    },

---

原因分析：

报错信息提示图片加载错误，我一开始的时候以为是网络的问题，后来随着我测试次数越来越多，我发现不是没有规律的报错。
只有页面初始化第一次去请求合并生成二维码时才会报这个加载错误。
一开始我以为是二维码生成部分有问题，致使合成海报错误，然后我就去打印生成的二维码。
打印后发现二维码正常，继续向下排查，各种打印然后各种判断，最后打断点后才发现，无论我怎样调整都是先走的合成海报，然后再生成二维码，本来打算使用async解决的，后来觉得延时器更方便，找到问题，处理结果就很轻松啦

---

解决方案：

事件的执行顺序有问题才会造成的问题，接下来上代码啦！
这个困扰我将近10小时的问题，终于解决啦，开心！！！！！
上代码：

    //点击分享爱传递海报
    CD_QRcodeShare(){
        oldNetService.cchVersionEvent("LJ082009","NULL",window.location.href.split("?")[0],"立即邀请"); //埋点
        this.sendBfdToApp("MSAPA058", window.location.href.split("?")[0]);
        const params = {
            data: {
                activityCode: "2",
                functionUrl: 'http://slcsptest.sinosig.com/app/#/RhProduct/RhDetail'
            }
        };
        serviceApi
            .getShareGenerateQrCode(params)
            .then(res => {
                this.QC = "data:image/png;base64," + res.data.qrCodeBase //生成的二维码urL
                const that = this;
                setTimeout(function () {//延时触发生成海报，
                that.CDYaoqing();//目的图片加载完成后再合成
                that.YQsharePopupVisible = true;
                },2000)
            })
            .catch(err => {
            this.$messagebox({
                title: "提示",
                message: err.message
            });
        });
        
    },

这个坑我真的是印象深刻，因为平时很少做移动端的项目，经验比较少，真的是比较容易踩坑，如果以上有什么问题，随时私聊探讨，一起在技术的道路上越走越远吧！！！！