html2canvas not rendering image (externally hosted images)

Question

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

this is my jquery:

var shotit = function() {
$('.bodyWrap').html2canvas({
onrendered : function(canvas) {
var img = canvas.toDataURL();
    $('<img>',{src:img}).appendTo($('body'));
        }
    }); }

body wrap is a really long html element with lots of child elements in it, but it basically goes like this

<div class="bodyWrap">

        <div class="header">
          <h1>TITLE</h1>
        </div>

            <div class="slideshowWrapper">
              <div class="slideshow">
                    <div class="slideshowWrapper">
                <div class="slideshow">
                    <div class="slide">
                       <img class="img2" src="https://i.imgur.com/mnJDmlS.jpg" alt="head1">
<div class="emailButton">
 <a class="emailLink" href="mailto:[email protected]?Subject=Let's mail"target="_blank"><br>Name of Artist</a>
</div>
                    </div>
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
              <div class="slideshow">
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
              <div class="slideshow">
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
              <div class="slideshow">
                  <div class="slide">
                        <img https://picture.jpg>
                  </div>
                  <div class="slide">
                        <img https://picture.jpg>
                  </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
                  </div>
              </div>
            </div>
</div>

the images are hosted on externally imgur and not on my website.

and then a button which looks like this (for taking the pic)

<a href="#" onClick="shotit()">take picture</a>

sorry thats probably a bit much code but i just don't know where the problem is!!

anyway, any help or pointers gratefully received! thanks

Answer 1

You can do so by passing one of the option in html2canvas function.

html2canvas(document.body,
{
useCORS: true, //By passing this option in function Cross origin images will be rendered properly in the downloaded version of the PDF
onrendered: function (canvas) {
 //your functions here
}
});