3

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

这是图像加载代码的示例：

<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() 的日志是一个空白画布，可能是因为log()调用是在draw()函数完成之前执行的。相反，如果我将该日志调用移到内部，则会draw()收到 JavaScript 错误：SecurityError: The operation is insecure

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

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

4

2 回答 2

2

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

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

于 2012-12-14T17:02:42.967 回答
-1

我的代码没有安全错误：

<pre>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<script src="Scripts/jquery-2.1.0.min.js"></script>

<script type="text/javascript">
    function WindowsLoad()
    {
        var c = document.getElementById("myCanvas");
        var 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>

<body onload="WindowsLoad();">
    <form id="form1" runat="server">
        <div>
            <canvas id="myCanvas">
            </canvas>
        </div>
    </form>
</body>
</html>
</pre>
于 2014-03-05T16:26:18.980 回答