html2canvas无法呈现CDN图像 [英] html2canvas not rendering CDN images

问题描述

我正在尝试使用html2canvas获取屏幕截图.它可以很好地处理文本，但不能渲染CDN图像，如果我将图像托管在服务器中，则可以正常工作，但是如果尝试从CDN链接加载图像，则这些图像无法渲染.

I'm trying to get screenshot using html2canvas. It's working fine for text but it is not rendering CDN images, if i host the images in server it was working fine but if trying to load images from CDN links those image were not rendering.

我的代码是:

index.php

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>

推荐答案

好的，我知道了问题所在.html2canvas如果不是来自同一来源，则无法捕获图像.图像来自CDN.html画布有一些限制

OK, well I figured out what the problem is. html2canvas can't capture an image if it's not from the same origin. Images are coming from a CDN. There are some limitation to html to canvas

限制

脚本使用的所有图像都必须位于 相同来源 ，使其无需 代理的帮助即可阅读它们.同样，如果您的页面上还有其他画布元素，这些画布元素已被跨域内容污染，则它们将变脏并且无法被html2canvas读取.

All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.

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

The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe content either.

文档

这篇关于html2canvas无法呈现CDN图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！