Html2Canvas 延迟渲染图像而不是序列

Question

我在使用 Html2canvas 渲染时遇到问题，因为我想拍摄图像的多个屏幕截图并按顺序将其发送给选定的联系人，但 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;

}

Answer 1

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

此外，您正在以一种“古怪”的方式使用 Promise，您正在等待非异步事件。所以难怪一切都在错误的顺序。

canvas.toDataURL是同步执行的，而分配Image对象src是异步的。

根据MDN page about images

var img = new Image();   // Create new img element
img.onload = function() {
    // image is loaded now
}
img.src = 'myImage.png'; // Set source path NOTE: this can be a base64 dataURL

另外，您的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()

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);
            });
        });

我无法专门测试您的代码，但我不得不管理大量在一系列canvas.toDataURL() 之后必须加载的图像。 我在按顺序做事时遇到的问题始终是 Image 对象的 onload 回调，而 Html2Canvas 到目前为止对我来说工作正常。

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

Answer 2

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

P.S - 当前版本仅用于开发目的，不用于生产。 （这应该是一个评论，但我没有那么大的声誉。）