带有 html2canvas 的 div 内容的 jQuery 循环数组答案

【问题标题】：jQuery loop array with div content inside with html2canvas带有 html2canvas 的 div 内容的 jQuery 循环数组
【发布时间】：2014-09-27 01:06:13
【问题描述】：

我有一个名为 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,
            });
        }
    });
});

如您所见，我的最终目标是保存两个或三个甚至更多图像。我的问题是所有图像都保存在最后一个索引（数组的）内容中。

【问题讨论】：

标签： javascript jquery arrays

【解决方案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
            }
        });
    }
}

【讨论】：