jquery - html2canvas 不渲染 CDN 图片

Question

我正在尝试使用 html2canvas 获取屏幕截图。它对文本工作正常，但不渲染 CDN 图像，如果我在服务器中托管图像，它工作正常，但如果尝试从 CDN 链接加载图像，则这些图像不会渲染。

我的代码是:

索引.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();
        }
    });
}

保存.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 函数中传递一个选项来实现。

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
   }
});