javascript - 带有 html2canvas 内部 div 内容的 jQuery 循环数组

Question

我有一个名为 listArray() 的数组，它包含两个属性 pageNumber 和 content。

属性 content 包含容器 div html。这很有用，因为我有一个分页，我不会将该信息实时保存到数据库中，而是插入到一个数组中，最后才插入到数据库中。

$container = $('#container');

$.each(listArray, function(index, value){

    // So, for each index in array
    // it must empty the container
    // to receive a new value
    $container.empty();
    $container.append(value.content); // value.content = pure html      

    html2canvas($container, {
        height: $container.height() + 180,
        onrendered: function(canvas) {

            var data = canvas.toDataURL('image/png');           
            var file = dataURLtoBlob(data);

            var formObjects = new FormData();
            formObjects.append('file', file);

            $.ajax({
               url: 'ajax_saveImage',
               type: 'POST',
               data: formObjects,
               processData: false,
               contentType: false,
            });
        }
    });
});

如您所见，我的最终目标是保存两张或三张甚至更多图片。我的问题是所有图像都被保存，但包含最后一个索引(数组的)内容。

Answer 1

已解决。

解决方案不是循环，而是根据需要多次调用函数。看了这个话题我想到了解决方案Looping html2canvas

var i = 0;

function saveIt(){  
    $container.empty();

    if(i <= listArray.length - 1){

        $container.append(listArray[i]['content']);

        html2canvas($container, {
            height: $container.height() + 180,
            letterRendering: true,
            onrendered: function(canvas) {

                var data = canvas.toDataURL('image/png');           
                var file = dataURLtoBlob(data);

                var formObjects = new FormData();
                formObjects.append('file', file);

                $.ajax({
                   url: 'ajax_saveImage',
                   type: 'POST',
                   data: formObjects,
                   processData: false,
                   contentType: false,
                });

                i++;
                saveIt(); // Important! - call the function again
            }
        });
    }
}