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>