Question

我有一个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();
        }
    });
}

Answer 1

我找到了自己的答案：执行showShelf()函数后，我执行了一个setTimeout()函数，其中包含实际的html2canvas()调用和执行下一个渲染的调用。

多次渲染相同的DIV并捕获每个画布

1 个答案: