html2canvas 等待图像加载

我遇到这个问题已经有一段时间了，但我似乎找不到解决方案。

我正在使用最新的 html2canvas js 插件来截取使用 fllotcharts 制作的图表的屏幕截图，然后通过隐藏输入提交 base64 屏幕截图。问题是带有图表的 div 也有一些图像，并且 html2canvas 在加载图像之前返回一个 base64 字符串。我可以在提交上放置一个 setTimeout ，直到它们加载完毕，但显然 chrome 打开我作为弹出窗口提交的页面（这确实不好，因为我们的客户不知道如何允许弹出窗口）。 所以这就是我尝试过的，但图像没有预加载（因为 html2canvas 的异步性质）

function getPNGBase64forHtml($container) {
    var imageString;

    html2canvas($container, {
        useCORS: true,
        onrendered: function(canvas) {
            imageString = canvas.toDataURL('image/png');
        }
    });

    return imageString;
}

还有这个（这工作正常，但它没有及时加载图像）：

function getPNGBase64forHtml($container) {
    var h2canvas = html2canvas($container);
    var queue = h2canvas.parse();
    var canvas = h2canvas.render(queue);

    return canvas.toDataURL('image/png');
}

所以问题是等待图像加载到 html2canvas 中然后执行我的其余部分。 如果有人能提供帮助，我将不胜感激，我向善良的先生们、女士们鞠躬！ :)

Edit:

这是我捕获的部分的 html，这一切都在打印容器 div 中，仅此而已。时间线预测中的箭头（仅显示一个）不会被捕获，因为它是一张图像，其他所有内容都会被捕获：

<div id="timeline-outer-container">
    <div id="timeline-container" class="flot-container">
        <div id="timeline-chart" class="flot-chart">
            <canvas class="flot-base" width="888" height="335" ></canvas>
            <div class="flot-text" >
                <div class="flot-x-axis flot-x1-axis xAxis x1Axis">
                    <div class="flot-tick-label tickLabel" >Q1</div>
                    <div class="flot-tick-label tickLabel">Q2</div>
                    ...
                </div>
                <div class="flot-y-axis flot-y1-axis yAxis y1Axis">
                    <div class="flot-tick-label tickLabel">75</div>
                    <div class="flot-tick-label tickLabel">100</div>
                    ...
                </div>
            </div>
            <canvas class="flot-overlay" width="888" height="335"></canvas>
            <div class="axis-label xaxis">Zeitraum</div>
            <div class="axis-label yaxis rotate-90">Anzahl</div>
            <div id="zoom-out-button" class="timeline-zoom-button"><i class="fa fa-zoom-out"></i></div>
            <div id="zoom-in-button" class="timeline-zoom-button"><i class="fa fa-zoom-in"></i></div>
            <div id="zoom-default-button" class="timeline-zoom-button"><i class="fa fa-repeat"></i></div>
        </div>
    </div>
</div>

<div id="timeline-prognose">
    <img id="timeline-arrow-up" class="timeline-arrows" src="/portal//images/arrows/up.png" alt="">
    <img id="timeline-arrow-down" class="timeline-arrows" src="/portal//images/arrows/down.png" alt="">
</div>

因此，由于您使用的是远程图像，您可以使用以下修复程序在脚本中进行一些修改：

function getPNGBase64forHtml() {
    var imageString;

    html2canvas(document.body, {
        useCORS: true,
        logging : true, //Enable log (use Web Console for get Errors and Warnings)
        proxy :"html2canvasproxy.php",
        onrendered: function(canvas) {
            var img = new Image();
            img.onload = function() {
                img.onload = null;
                document.body.appendChild(img);
            };

            img.onerror = function() {
                img.onerror = null;
                if(window.console.log) {
                    window.console.log("Not loaded image from canvas.toDataURL");
                } else {
                    alert("Not loaded image from canvas.toDataURL");
                }
            };

            imageString = canvas.toDataURL('image/png');
        }
    });

    return imageString;
}

如果您使用 php，则代理设置必须使用以下脚本：html2canvas-php-代理 https://github.com/brcontainer/html2canvas-php-proxy

否则，对于 .NET 项目，您可以使用这些脚本资源：

html2canvas 代理与 asp-classic - vb https://github.com/brcontainer/html2canvas-asp-vbscript-proxy html2canvas 代理与 asp.net - csharp https://github.com/brcontainer/html2canvas-csharp-proxy

如果您决定使用本地图像，则不会出现此错误。

希望它对你有用，这是这个 html2canvas bug 的原始线程https://github.com/niklasvh/html2canvas/issues/145 https://github.com/niklasvh/html2canvas/issues/145