Clever Geek Handbook

Html2canvas not rendering image (external images)

I created a game where users select 4 images from 4 separate slideshows to create a composite image, which I then want to export to the gallery function on my site. I am trying to use html2canvas but am facing 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 a lot of children in it, but it basically looks like

<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 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 an external imgur and not on my website.

and then a button that looks like this (for taking a picture)

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

Sorry that there is probably a little bit of code, but I just don't know where the problem is!

anyway, any help or pointers are greatly appreciated! thank

+3


source to share


1 answer


Try the following:



<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>
+1


source






More articles:


All Articles