title: html2canvas wait for images to load
body: <p>I'm having this problem for some time ow and I can't seem to find a solution.</p>
  
  <p>I'm using the latest html2canvas js plugin to take a screenshot of chart made with flotcharts and then submit the base64 screenshot via a hidden input. The problem is the div with the chart also has some images and html2canvas return a base64 string before the images are loaded. I can put a setTimeout on the submit untill they are loaded but apparently chrome opens the page where I submitted as a popup (which is really not ok cause our clients don't know how allow popups).
  So this is what I tried but the images are not preloaded (because of the async nature of html2canvas)</p>
  
  <pre><code>function getPNGBase64forHtml($container) {
      var imageString;
  
      html2canvas($container, {
          useCORS: true,
          onrendered: function(canvas) {
              imageString = canvas.toDataURL('image/png');
          }
      });
  
      return imageString;
  }
  </code></pre>
  
  <p>And also this (this works ok but it doesn't load the images in time):</p>
  
  <pre><code>function getPNGBase64forHtml($container) {
      var h2canvas = html2canvas($container);
      var queue = h2canvas.parse();
      var canvas = h2canvas.render(queue);
  
      return canvas.toDataURL('image/png');
  }
  </code></pre>
  
  <p>So the problem is with waiting till the images are loaded in html2canvas then exeuting the rest of my stuff.
  If anyone can please help, that would be very much appreciated, I bow to you kind sirs and madams! :)</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>Here is the html of the part that I capture, this all is in a print-container div thats all. The arrow (only one is showed) in the timeline-prognose doesn't get captured cause it's a image, everything else does:</p>
  
  <pre><code>&lt;div id="timeline-outer-container"&gt;
      &lt;div id="timeline-container" class="flot-container"&gt;
          &lt;div id="timeline-chart" class="flot-chart"&gt;
              &lt;canvas class="flot-base" width="888" height="335" &gt;&lt;/canvas&gt;
              &lt;div class="flot-text" &gt;
                  &lt;div class="flot-x-axis flot-x1-axis xAxis x1Axis"&gt;
                      &lt;div class="flot-tick-label tickLabel" &gt;Q1&lt;/div&gt;
                      &lt;div class="flot-tick-label tickLabel"&gt;Q2&lt;/div&gt;
                      ...
                  &lt;/div&gt;
                  &lt;div class="flot-y-axis flot-y1-axis yAxis y1Axis"&gt;
                      &lt;div class="flot-tick-label tickLabel"&gt;75&lt;/div&gt;
                      &lt;div class="flot-tick-label tickLabel"&gt;100&lt;/div&gt;
                      ...
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;canvas class="flot-overlay" width="888" height="335"&gt;&lt;/canvas&gt;
              &lt;div class="axis-label xaxis"&gt;Zeitraum&lt;/div&gt;
              &lt;div class="axis-label yaxis rotate-90"&gt;Anzahl&lt;/div&gt;
              &lt;div id="zoom-out-button" class="timeline-zoom-button"&gt;&lt;i class="fa fa-zoom-out"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div id="zoom-in-button" class="timeline-zoom-button"&gt;&lt;i class="fa fa-zoom-in"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div id="zoom-default-button" class="timeline-zoom-button"&gt;&lt;i class="fa fa-repeat"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="timeline-prognose"&gt;
      &lt;img id="timeline-arrow-up" class="timeline-arrows" src="/portal//images/arrows/up.png" alt=""&gt;
      &lt;img id="timeline-arrow-down" class="timeline-arrows" src="/portal//images/arrows/down.png" alt=""&gt;
  &lt;/div&gt;
  </code></pre>