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

好的，我知道问题出在哪里了。 html2canvas 无法截取非同源图像。图片来自 CDN。 html 到 canvas

有一些限制

限制

脚本使用的所有图像都需要位于 same origin for it to be able to read them without the assistance of a proxy 下。同样，如果页面上有其他 canvas 元素被跨源内容污染，它们将变脏并且无法再被 html2canvas.[=12 读取=]

该脚本不呈现插件内容，例如 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 图片

html2canvas not rendering CDN images

jquery

html2canvas