html2canvas转为图片异步转同步问题（记录）

描述：最近使用html2canvas插件截取页面上指定dom为图片，然后将生成的图片替换页面上的dom后，将替换后的页面内容保存至数据库，结果保存的是保存前的页面，初步判定是html2canvas的异步执行造成的。

 

参考了两篇博文：

一、H5 -- （功能）基于html2canvas实现长按网页保存为图片到本地

https://blog.csdn.net/weixin_41076513/article/details/80896399

二、漫谈javascript同步&异步编程的N种方式 - ps:将html2canvas变成同步的解决方案

http://www.cnblogs.com/quenteenfix/p/3556269.html

对html2canvas的使用很有帮助，但遗憾的是最终并没有让我实现接下来的同步执行方法；

于是又发现了下面这篇文章：使用ajax 回调函数返回值 使用Promise完美解决（不是异步）

https://blog.csdn.net/fastjack/article/details/79981261

根据文章所讲，发现html2canvas方法返回的确实是一个Promise对象，也确实可以用返回的promise对象.then()或Promise.all().then()方法实现同步执行；

var _previewReport = {


    /**
     * 将指定class的动态图截图并替换为静态图
     * @param selector
     */
    html2canvas: function (selector) {
        var canvasArr=[];
        selector.each(function () {
            var thisSelector = $(this);
            //返回的是一个promise对象
            var canvas1=html2canvas(thisSelector, {
                // async:false,//同步执行
                onrendered: function (canvas) {
                    // console.info($(canvas))//
                    var thisWidth = $(canvas).attr("width");
                    var thisHeight = $(canvas).attr("height");
                    var url = canvas.toDataURL();//data:image/png;base64,base64码
                   thisSelector.empty().append('');
                   console.info(1111)

                    //以下代码为下载此图片功能
                    // var nowDate=new Date().getTime();
                    // var triggerDownload = $("").attr("href", url).attr("download", nowDate+"_img.png").appendTo("body");
                    // triggerDownload[0].click();
                    // triggerDownload.remove();
                }
            });
            canvasArr.push(canvas1);
            //方法一：在执行完canvas1后执行
            // canvas1.then(function (response) {
            //     // console.info(response)
            // }).catch(function (reason) {
            //     console.error(reason)
            // });

            //方法二：在执行完canvas1后执行，这里all（）方法中可以传入多个promise对象，是一个数组，
            // then中的参数则是每个promise对应的返回值
            // Promise.all([canvas1]).then(function ([response]) {
            //     console.info(response)
            // })

        });
        Promise.all(canvasArr).then(function () {
            console.info(1122);
            /**
             * 保存为word文件
             */
            
        })
        console.info(2222)
    }
};


//保存为word
$("#saveAsWord").click(function () {
    _previewReport.html2canvas($(".imageDiv"));
    console.info(333)
})

最终打印的顺序：

说明确实Promise.all()中的方法在html2canvas后执行，即为同步执行；