jquery - 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( ) 将立即执行。

这里有一些应该修复它的代码，我正在创建一个 promise ，该 promise 将在加载图像时得到解决

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。