html2canvas不呈現CDN圖像

Question

我想使用html2canvas獲取屏幕截圖。它工作正常的文本，但它不是呈現CDN圖像，如果我託管圖像在服務器中工作正常，但如果試圖加載圖像從CDN鏈接那些圖像不呈現。

我的代碼是：

的index.php

<div id="target"> 
    <img id="editor_Img_1" src="http://d2j259rizy5u5h.cloudfront.net/outputvideos/thumbs/email_44_2015_03_02_54f462457526c-00001.png" alt="event-video" style="height: 200px; width: 320px;"> 
</div> 

function capture() { 
    $('#target').html2canvas({ 
     onrendered: function (canvas) { 
      var img = canvas.toDataURL(); 
      console.log(img); 
      $('<img>',{src:img}).appendTo($('img')); 
      //Set hidden field's value to image data (base-64 string) 
      $('#img_val').val(canvas.toDataURL("image/png")); 
      //Submit the form manually 
      document.getElementById("myForm").submit(); 
     } 
    }); 
} 

Save.php

<?php 
    //Get the base-64 string from data 
    $filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1); 

    //Decode the string 
    $unencodedData=base64_decode($filteredData); 

    echo $filteredData; 

    //Save the image 
    file_put_contents('img.png', $unencodedData); 
?> 
<h2>Save the image and show to user</h2> 
<table> 
<tr> 
    <td> 
     <a href="img.png" target="blank"> 
      Click Here to See The Image Saved to Server</a> 
    </td> 
    <td align="right"> 
     <a href="index.php"> 
      Click Here to Go Back</a> 
    </td> 
</tr> 
<tr> 
    <td colspan="2"> 
     <br /> 
     <br /> 
     <span> 
      Here is Client-sided image: 
     </span> 
     <br /> 
     <?php 
      //Show the image 
      echo '<img src="'.$_POST['img_val'].'" />'; 
     ?> 
    </td> 
</tr> 
</table> 

Answer 1

OK，好，我想通了，問題是什麼。如果html2canvas不是來自同一個源，則無法捕獲圖像。圖像來自CDN。有一些限制的HTML畫布

限制

所有的圖像，該腳本使用需要駐留下same origin爲它能夠在不的proxy協助下閱讀。同樣，如果頁面上有其他畫布元素，它們已被交叉源內容污染，則它們將變髒並且不再能被html2canvas讀取。

該腳本不呈現插件內容，如Flash或Java小程序。它也不呈現iframe內容。

Documentation