html2canvas not rendering image

Question

Я создал игру, в которой пользователи выбирают 4 изображения из 4 отдельных слайд-шоу, чтобы создать составное изображение, которое затем я хочу, чтобы иметь возможность экспортировать в функцию «галерея» на моем сайт. Я пытаюсь использовать html2canvas, но я сталкиваюсь с некоторыми проблемами

это мой JQuery:

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

обертывание является очень длинный HTML элемент с большим количеством дочерних элементов в ней, но она в основном идет как это

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

изображения размещены на внешнем imgur а не на моем сайте.

, а затем кнопку, которая выглядит следующим образом (для приема ПОС)

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

жаль то будет, вероятно, немного больше кода, но я просто не знаю, где эта проблема стоит !!

в любом случае, любая помощь или указатели с благодарностью получили! спасибо

Answer 1

Попробуйте это:

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