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