html2canvas warten, bis die Bilder laden

Ich bin mit diesem problem für einige Zeit ow und ich kann nicht scheinen, um eine Lösung zu finden.

Ich bin mit der neuesten html2canvas js-plugin, um einen screenshot von der Grafik gemacht mit flotcharts und anschließend die base64-screenshot über eine versteckte Eingabe. Das problem ist das div mit der Grafik hat auch einige Bilder und html2canvas zurück, die eine base64-Zeichenfolge, bevor die Bilder geladen sind. Ich kann ein setTimeout auf Absenden, bis Sie geladen sind, aber anscheinend chrome öffnet sich die Seite, wo ich es eingereicht habe als popup (das ist wirklich nicht ok, dass unsere Kunden nicht wissen, wie man popups zulassen).
Also das ist, was ich versucht, aber die Bilder sind nicht vorgespannt (aufgrund der asynchronen Natur von html2canvas)

function getPNGBase64forHtml($container) {
    var imageString;

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

    return imageString;
}

Und auch (dies funktioniert ok, aber es muss nicht laden Sie die Bilder in der Zeit):

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

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

Also das problem ist zu warten bis die Bilder geladen sind, in html2canvas dann exeuting der rest von meinem Zeug.
Wenn jemand kann bitte helfen, das wäre sehr geschätzt, ich verneige mich vor Ihnen freundlichen Damen und Herren, und geehrte Damen! 🙂

Bearbeiten:

Hier ist der html-Code der Teil, den ich einfangen, all dies ist in einer print-div-container, das ist alles. Der Pfeil (nur eine ist gezeigt) in die timeline-prognose nicht erfasst, weil es ein Bild, alles andere macht:

<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>
  • das div mit der Grafik hat auch einige Bilder? zeigen Sie einen screenshot oder ein Stück code, wo Sie die Diagramme 🙂
  • Ich habe den div-Struktur, wie Sie wollte (ein bisschen gesäubert von unnötigen styles und so), aber die Grafik ist nicht das problem, was ich sehe.
  • das problem ist also nicht die Pfeil-Bilder?
  • ja das problem ist, die Bilder (Pfeil), werden nicht gerendert, schnell genug, ich brauche zu warten, für die Bilder, aber Sie sind asynchron verarbeitet von html2canvas
InformationsquelleAutor Cserny | 2014-07-27
Schreibe einen Kommentar