javascript - SecurityError : Load an image in canvas, 修改它并创建dataURL

Question

我正在尝试使用 HTML5 引入一个图像文件，将其绘制到 Canvas 上，对其进行一些操作，然后返回数据 URL，以便我可以引用这个新生成的图像。

这是一个简单的图像加载代码示例:

<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
    c = document.getElementById("myCanvas");
    cxt = c.getContext("2d");

    var img=new Image();
    img.src = "http://www.google.com/images/srpr/logo3w.png";
    //img.src = 'image/placemark.png';
    img.onload = function() {
        cxt.drawImage(img, 0, 0);
    }

    console.log(c.toDataURL());
</script>

所以，对于这样的代码，c.toDataURL() 的日志是一个空白 Canvas ，大概是因为 log() 调用在 draw() 之前执行> 功能完成。相反，如果我将日志调用移到 draw() 中，我会收到一个 JavaScript 错误:SecurityError: The operation is insecure

如果相反，我使用本地镜像并将 log 放入 draw 函数，我在那里得到预期的输出 - 但函数外仍然是空白 Canvas

我想我的实际问题是:如何将外部图像加载到 Canvas ，然后以某种方式修改它的内容？

Answer 1

需要在托管图像的服务器上设置跨源，使其成为 CORS enabled image如果您想进行任何类型的图像修改。

如果服务器端未设置此项，唯一的其他选择是通过与您的脚本位于同一域的服务器端代理下载图像。只要图片来自同一域，您就可以对其进行修改。