html2canvas不渲染图像（外部托管图片）

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而不是在我的网站上。

，然后一个按钮，看起来像这样（为服用PIC）

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