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

带有div内容的jQuery循环数组，里面有html2canvas

1 个答案: