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

好的，我弄清楚问题是什么。如果图像不是来自同一个来源，则html2canvas无法捕获图像。图像来自CDN。 html to canvas

有一些限制

<强>限制

脚本使用的所有图片都需要位于 same origin 下，以便能够在没有 proxy的帮助的情况下阅读它们 STRONG>。同样，如果页面上有其他画布元素，这些元素已被多源内容污染，它们将变得脏，并且不再被html2canvas读取。

脚本不会呈现插件内容，例如Flash或Java小程序。它也不会呈现iframe内容。

Documentation

Answer 2

您可以通过传递html2canvas函数中的选项之一来实现。

html2canvas(document.body,
{
   useCORS: true, //By passing this option in function Cross origin images will be rendered properly in the downloaded version of the PDF
   onrendered: function (canvas) {
     //your functions here
   }
});

html2canvas不呈现CDN图像

2 个答案: