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:emailaddres@email.com?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

Refer this [link](http://html2canvas.hertzen.com/examples.html) — Rayon, May 21 '15 at 11:40
@Murtuza - It's been 5 years since I posted this. Seems like the link is no longer available. I suggest you to refer this https://html2canvas.hertzen.com/ — Rayon, Jun 04 '21 at 05:29
Try using **dom-to-image** library if your image has Non Latin characters. — Mohammedsalim Shivani, Nov 08 '22 at 11:52

score 23 · Answer 1 · answered Nov 02 '18 at 08:46

23

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
}
});

answered Nov 02 '18 at 08:46

AKNair

1,369
1
12
24

Thanks Bro. It really helped me a lot after so much R&D – sree Apr 01 '22 at 11:45
One can also use a proxy library https://github.com/niklasvh/html2canvas-proxy-nodejs – Richard Muvirimi Jan 09 '23 at 08:37

Rayon · Accepted Answer · 2015-05-21T16:20:03.653

2

Try this:

<div class="bodyWrap">
  <div class="header">
    <h1>TITLE</h1>
  </div>
  <div class="slideshowWrapper">
    <div class="slideshow">
      <div class="slide">
        <img src="https://picture.jpg">
      </div>
      <div class="slide">
        <img src="https://picture.jpg">
      </div>
      <div class="prevControl"></div>
      <div class="nextControl"></div>
      <div class="slideshow">
        <div class="slide">
          <img src="https://picture.jpg">
        </div>
        <div class="slide">
          <img src="https://picture.jpg">
        </div>
        <div class="prevControl"></div>
        <div class="nextControl"></div>
        <div class="slideshow">
          <div class="slide">
            <img src="https://picture.jpg">
          </div>
          <div class="slide">
            <img src="https://picture.jpg">
          </div>
          <div class="prevControl"></div>
          <div class="nextControl"></div>
          <div class="slideshow">
            <div class="slide">
              <img src="https://picture.jpg">
            </div>
            <div class="slide">
              <img src="https://picture.jpg">
            </div>
            <div class="prevControl"></div>
            <div class="nextControl"></div>
          </div>
        </div>
      </div>
    </div>
    <a href="#" onClick="shotit(event)">take picture</a>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="html2canvas.js"></script>
    <script>
      var shotit = function(e)
      {
        e.preventDefault();
        html2canvas($('.bodyWrap'), {
          onrendered: function(canvas)
          {
            document.body.appendChild(canvas);
          },
          logging:true
        });
      };
    </script>

edited May 21 '15 at 16:20

answered May 21 '15 at 11:47

Rayon

36,219
4
49
76

hey! ah thanks, thats almost done it but its not including the '.slideshow' or '.slide' elements... any ideas why? do i need to add them to the jquery? – Phoebe19 May 21 '15 at 12:41
also i forgot to mention, the slideshow uses jquery to function, is that effecting it? (sorry i dont know how to do code here) $(document).ready(function () { $('.slideshow').cycle({ timeout: 0, slides: "> div.slide", speed: 500, fx: "scrollHorz" }); $('.nextControl').on('click', function(e) { $(this).closest('.slideshow').cycle('next'); }); $('.prevControl').on('click', function(e) { $(this).closest('.slideshow').cycle('prev'); }); $('.aboutToggle').on('click', function(e) { $(".sidebarright").toggleClass("sidebarrightactive"); }); }); – Phoebe19 May 21 '15 at 12:44
Pls put relative path in img tags...That will do...Kindly accept the answer if it has fulfilled your query... – Rayon May 21 '15 at 13:07
hi, im really sorry but i dont know what a relative path is! i'm really new to coding and trying to learn as i go along, thanks! – Phoebe19 May 21 '15 at 13:14
the images are being hosted on imgur, so they dont have relative paths?? – Phoebe19 May 21 '15 at 13:40
Can you edit your example with the actual image path ? Try replacing 'https' with 'http' and gibe it a try... – Rayon May 21 '15 at 15:07
Added 1 example, they're all the same but with different images/email addresses and artist names – Phoebe19 May 21 '15 at 15:27
1

@Phoebe19, We can not draw images which belong to different host. You must have a server hosting images with the appropriate Access-Control-Allow-Origin header. – Rayon May 21 '15 at 16:23
@Phoebe19 did you get the solution for images? – Nikhil Radadiya Sep 01 '17 at 10:49

html2canvas not rendering image (externally hosted images)

2 Answers2

Linked