1

我希望能够将 Canvas（包含来自另一个域的图像）转换为 Image。为此，据我所知，我应该使用启用 CORS 的图像（以便能够将 .toDataURL() 用于画布）。问题是如何制作启用 CORS 的图像。以下代码在第一行引发错误：Cross-origin image load denied by Cross-Origin Resource Sharing policy。 

<html>
<body>
<input type="button" id="button" value="convert" onclick="onClick()" /></br>
<img id="output" />

<script>
    var source = "https://www.gravatar.com/avatar/7b67c827ee1671ba3b43f4aebf6794fb?s=128&d=identicon&r=PG";

    onClick = function () {
        var img = document.createElement('img');

        img.onload = function (e) {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var url = canvas.toDataURL();
            var output = document.getElementById("output");
            output.src = url;
        };

        img.crossOrigin = 'anonymous';
        img.src = source;
    };
</script>
</body>
</html>
4

1 回答 1

3

嗨，如果您需要 IE，建议您检查兼容性我不确定这种方法是否适合您。

请参阅此处，获取有关启用图像的 CORS 的帮助。 https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

本质上，CORS 标头被添加到提供图像的网络服务器中，因此这在某种程度上必须在您的控制之下。

因为我一直需要 IE，所以我发现的最简单的解决方案是简单地设置一个服务器端代理来提供图像，就好像它们来自您的域一样。

高温高压

于 2013-12-23T13:42:06.070 回答