Рендеринг одного и того же DIV несколько раз и захватывание каждого холста - PullRequest
Новая
       19

Рендеринг одного и того же DIV несколько раз и захватывание каждого холста

0 голосов
/ 29 октября 2019

У меня есть один DIV, который может содержать много разных изображений на основе пользовательского ввода. Когда пользователь завершит настройку приложения, окончательным результатом будут изображения, которые были визуализированы (один за другим) в том же DIV. Для захвата изображения я использую html2canvas . Проблема в том, что как только я запускаю цикл для перерисовки изображений по мере необходимости в div и захвата их, только первое изображение фактически захватывается каждый раз.

Другими словами, это как если бы showShelf () функция в приведенном ниже коде никогда не выполняется. 

var exportJSON;
var exportDeviceList;
var renderNumber;
function exportAll()
{
    exportJSON = [];
    exportDeviceList = [];
    renderNumber = 0;
    for (var i = 0; i < devices.length; i++)
    {
        var elements = devices[i].elements;
        for (var j = 0; j < elements.length; j++)
        {
            exportDeviceList.push({site: devices[i].site, device: elements[j].id, name: elements[j].tid, config: elements[j].config});
        }
    }
    renderNext();
}

function renderNext()
{
    site = exportDeviceList[renderNumber].site;
    device = exportDeviceList[renderNumber].device;
    config = exportDeviceList[renderNumber].config;
    showShelf(site,device,config);
    html2canvas(document.getElementById("baseImage"), {allowTaint: true}).then(function (canvas)
    {
        exportJSON.push({tid: exportDeviceList[renderNumber].name, image: canvas.toDataURL("image/png")});
        renderNumber++;
        if (renderNumber < exportDeviceList.length)
        {
            renderNext();
        }
    });
}

1 Ответ

0 голосов
/ 29 октября 2019

Я нашел свой собственный ответ: после выполнения функции showShelf() я выполняю функцию setTimeout(), содержащую фактический вызов html2canvas() и вызов для выполнения следующего рендеринга.

...