title: html2canvas not rendering image (externally hosted images)
body: <p>I have created a game in which users pick 4 images from 4 separate slideshows to create a composite image, which I then want to be able to export to a 'gallery' function on my site. I am attempting to use html2canvas but am encountering some problems</p>
  
  <p>this is my jquery:</p>
  
  <pre><code>var shotit = function() {
  $('.bodyWrap').html2canvas({
  onrendered : function(canvas) {
  var img = canvas.toDataURL();
      $('&lt;img&gt;',{src:img}).appendTo($('body'));
          }
      }); }
  </code></pre>
  
  <p>body wrap is a really long html element with lots of child elements in it, but it basically goes like this</p>
  
  <pre><code>&lt;div class="bodyWrap"&gt;
  
          &lt;div class="header"&gt;
            &lt;h1&gt;TITLE&lt;/h1&gt;
          &lt;/div&gt;
  
              &lt;div class="slideshowWrapper"&gt;
                &lt;div class="slideshow"&gt;
                      &lt;div class="slideshowWrapper"&gt;
                  &lt;div class="slideshow"&gt;
                      &lt;div class="slide"&gt;
                         &lt;img class="img2" src="https://i.imgur.com/mnJDmlS.jpg" alt="head1"&gt;
  &lt;div class="emailButton"&gt;
   &lt;a class="emailLink" href="mailto:emailaddres@email.com?Subject=Let's mail"target="_blank"&gt;&lt;br&gt;Name of Artist&lt;/a&gt;
  &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="slide"&gt;
                          &lt;img https://picture.jpg&gt;
                      &lt;/div&gt;
                        &lt;div class="prevControl"&gt;&lt;/div&gt;
                        &lt;div class="nextControl"&gt;&lt;/div&gt;
                &lt;div class="slideshow"&gt;
                      &lt;div class="slide"&gt;
                          &lt;img https://picture.jpg&gt;
                      &lt;/div&gt;
                      &lt;div class="slide"&gt;
                          &lt;img https://picture.jpg&gt;
                      &lt;/div&gt;
                        &lt;div class="prevControl"&gt;&lt;/div&gt;
                        &lt;div class="nextControl"&gt;&lt;/div&gt;
                &lt;div class="slideshow"&gt;
                      &lt;div class="slide"&gt;
                          &lt;img https://picture.jpg&gt;
                      &lt;/div&gt;
                      &lt;div class="slide"&gt;
                          &lt;img https://picture.jpg&gt;
                      &lt;/div&gt;
                        &lt;div class="prevControl"&gt;&lt;/div&gt;
                        &lt;div class="nextControl"&gt;&lt;/div&gt;
                &lt;div class="slideshow"&gt;
                    &lt;div class="slide"&gt;
                          &lt;img https://picture.jpg&gt;
                    &lt;/div&gt;
                    &lt;div class="slide"&gt;
                          &lt;img https://picture.jpg&gt;
                    &lt;/div&gt;
                        &lt;div class="prevControl"&gt;&lt;/div&gt;
                        &lt;div class="nextControl"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>the images are hosted on externally  imgur and not on my website.</strong> </p>
  
  <p>and then a button which looks like this (for taking the pic)</p>
  
  <pre><code>&lt;a href="#" onClick="shotit()"&gt;take picture&lt;/a&gt;
  </code></pre>
  
  <p>sorry thats probably a bit much code but i just don't know where the problem is!!</p>
  
  <p>anyway, any help or pointers gratefully received! thanks</p>