Jquery Html2Canvas延迟渲染图像，而不是按顺序渲染

我在使用Html2canvas render时遇到问题，因为我想拍摄一幅图像的多个屏幕截图，并按顺序将其发送给选定的联系人，但Html2canvas以延迟和不连续的方式渲染图像，因此无法将图像发送给相应的选定联系人。下面是我的代码，它正在成功运行，但是延迟和不连续的输出造成了很多问题

function printCards(calle, eventID){
    var cards = new Array();

    var checkboxArray = $("input[name='contactsParty']:checked");

    $('#inviteContactName').html($(checkboxArray[0]).parent().prev().children('label').text());

        //  iterating selected checkboxes for invitation
        checkboxArray.each(function(index, value){


            //  getting name of next contact selected
            var name = $(checkboxArray[index+1]).parents().eq(1).find('label').text();


            //  Getting invitation card
            var invitationCard;
            $.when(invitationCard = getImage(name)).promise().done(function(){
                //  saving the printed invitation
                cards.push(invitationCard);
            });

        });

    return cards;   

}

//  printing invitation card with contact name
function getImage(name){

    var invitationCard = new Image();


        html2canvas($("#invitationData"), {
//          logging : true,
            onrendered: function(canvas) {
                //  For image`enter code here`
                var ctx=canvas.getContext("2d");
//              ctx.webkitImageSmoothingEnabled = false;
//              ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var convertedImage;
                $.when(convertedImage = canvas.toDataURL('image/jpg')).promise().done(function(){
                    invitationCard.src = convertedImage;
                    $('#inviteContactName').html(name);
                });  
//              setTimeout(function (){}, 500);
            }

        });

    return invitationCard;

}

---

这个问题已经在即将发布的html2canvas中得到了解决，因为这个问题已经在开发人员的网站上多次提出。您只需等待最终版本的生产，或者您可以尝试它的测试版

当前版本仅用于开发目的，不用于生产。

---

（这应该是一个评论，但我没有那么多声誉。）

这不应该是Html2Canvas的问题，而是加载base64编码图像的方式不使用回调

此外，您正在以一种“不可靠”的方式使用承诺，您正在等待非异步的事件。因此，难怪一切都是按错误的顺序进行的

canvas.toDataURL

是同步执行的，而分配

图像

对象

src

是异步的

按照

另外，您的

getImage（）

函数没有返回

$.deferred（）

，这意味着

$。when（）

将立即执行

下面是一些应该修复它的代码，我正在创建一个承诺，它将在加载图像时得到解决

function getImage(name){
    var promise = $.deferred();
    var invitationCard = new Image();
        html2canvas($("#invitationData"), {
            onrendered: function(canvas) {
                var ctx=canvas.getContext("2d");
                ctx.imageSmoothingEnabled = false;
                var convertedImage = canvas.toDataURL('image/jpg');
                invitationCard.onload = function () {
                    // here loading is done, resolve our promise
                    $('#inviteContactName').html(name);
                    // pass the loaded image along with the promise
                    promise.resolve(invitationCard);
                }
                invitationCard.src = convertedImage;
            }
        });
    return promise;
}

在您的代码中调用

getImage（）

我无法具体测试您的代码，但我必须管理大量图像，这些图像必须在一系列

canvas.toDataURL（）

之后加载。 按顺序做事时，我的问题总是

onload

回调

Image

对象，而Html2Canvas到目前为止对我来说工作正常

---

另外，在不同浏览器上看到不同行为的原因是执行速度和/或图像缓存。如果浏览器可以在您使用之前加载图像，那么一切都会顺利进行，但您不应该假设，在创建图像时总是使用

onload

@Niklas plz看看这个主题……是否可以包括

html

，创建stacksnippets，JSFIDLE来演示？尝试将

invitationCard

作为已解析的jQuery返回。在

img

中延迟

invitationCard

加载

事件？是的，尝试了evrithing…..使用了jQuery。延迟但仍然延迟了非顺序执行…”是的，尝试了evrithing…..使用了jQuery。延迟但仍然延迟了非顺序执行…”可以创建stacksnippets，jsfiddle来演示吗？@guest271314使用此代码的模块非常复杂…因此我无法创建fiddle或stacksnippet…此代码在firefox中运行良好，但在chrome中它是不连续的。这在Html2Canvas中看起来不是问题，您有任何源代码吗？getImage（姓名）函数返回生成的图像，但根据您的回答，返回的是延迟对象而不是图像，因此我无法将生成的图像获取到我的卡阵列中。我非常感谢您的回答，但这不符合我的要求，因为我正在将生成的图像存储在阵列中以供进一步使用，并且也存储在sequ中选中复选框无效。@Abhishek如果您需要，您可以将加载的图像与承诺一起传递，检查代码，我已经更新了
解析
和
完成
部分。非常抱歉通知您……代码与我测试的要求不符……它正在生成重复的图像。@Abhishek您是在卡片阵列中得到两个图像？还是打印了两次？从您发布的代码来看，这不应该发生，可能是其他代码没有显示在这里。场景位于提供给getImage（）的图像名称上必须显示。应用代码后，一次提供的名称将显示多次。这不应该发生，一个图像上只有一个名称。
function getImage(name){
    var promise = $.deferred();
    var invitationCard = new Image();
        html2canvas($("#invitationData"), {
            onrendered: function(canvas) {
                var ctx=canvas.getContext("2d");
                ctx.imageSmoothingEnabled = false;
                var convertedImage = canvas.toDataURL('image/jpg');
                invitationCard.onload = function () {
                    // here loading is done, resolve our promise
                    $('#inviteContactName').html(name);
                    // pass the loaded image along with the promise
                    promise.resolve(invitationCard);
                }
                invitationCard.src = convertedImage;
            }
        });
    return promise;
}

checkboxArray.each(function(index, value){
            //  getting name of next contact selected
            var name = $(checkboxArray[index+1]).parents().eq(1).find('label').text();
            //  Getting invitation card
            var invitationCard = getImage(name);
            $.when(invitationCard).done(function(image){
                //  promise is resolved, image is loaded and can be used
                cards.push(image);
            });
        });