Javascript SecurityError：在画布中加载图像，修改它并创建dataURL_Javascript_Html_Canvas

Javascript SecurityError：在画布中加载图像，修改它并创建dataURL

javascript html canvas

Javascript SecurityError：在画布中加载图像，修改它并创建dataURL,javascript,html,canvas,Javascript,Html,Canvas,我正试图使用HTML5引入一个图像文件，将其绘制到画布上，对其进行一些操作，然后返回dataURL，以便我可以引用这个新生成的图像下面是图像加载代码的一个快速示例： <canvas id="myCanvas" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript

我正试图使用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>

<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>


您的浏览器不支持画布元素。
c=document.getElementById（“myCanvas”）；
cxt=c.getContext（“2d”）；
var img=新图像（）；
img.src=”http://www.google.com/images/srpr/logo3w.png";
//img.src='image/placemark.png'；
img.onload=函数（）{
cxt.drawImage（img，0，0）；
}
log（c.toDataURL（））；

因此，对于这样的代码，c.toDataURL（）的日志是一个空白画布，可能是因为

log（）

调用是在

draw（）函数完成之前执行的。如果相反，我将该日志调用移到draw（）中
我会得到一个JavaScript错误：SecurityError:操作不安全

相反，如果我使用本地图像并将log
放在draw
函数中，我会在那里得到预期的输出，但函数外部仍然是空白画布
我想我的实际问题是：如何将外部图像加载到画布中，然后以某种方式修改其内容？
如果要进行任何类型的图像修改，需要在承载图像的服务器上设置交叉源
如果未在服务器端设置此选项，则唯一的其他选项是通过与脚本位于同一域上的服务器端代理下载映像。只要映像来自同一域，您就可以修改它。
我的代码没有安全错误：

函数WindowsLoad（）
{
var c=document.getElementById（“myCanvas”）；
var cxt=c.getContext（“2d”）；
var img=新图像（）；
img.src=”http://www.google.com/images/srpr/logo3w.png";
//img.src='image/placemark.png'；
img.onload=函数（）{
cxt.drawImage（img，0，0）；
}
log（c.toDataURL（））；
}   
是的……这正是我害怕的。我想我要做的是让一个AJAX方法进入我的服务器，让PHP为我下载文件。@lightstrike如果你能接受这个答案，我们将不胜感激。@Loktar:事实上，它不起作用，你的示例中的数据不完整：事实上，它引入了OP所指的确切错误：检查：