画布已被跨源数据处理所污染

canvas has been tainted by cross-origin data work around

本文关键字：数据处理 污染      更新时间：2023-09-26

im编写一个脚本（或者一起编辑和破解东西）来编辑页面上图像的外观。我知道javascript的基本知识，但这是我第一次看画布。所以请耐心听我说

我得到这个错误：

无法从画布获取图像数据，因为画布已被跨原点数据污染

下面是我抛出错误的代码片段：

var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            height = img.naturalHeight || img.offsetHeight || img.height,
            width = img.naturalWidth || img.offsetWidth || img.width,
            imgData;

        canvas.height = height;
        canvas.width = width;
        context.drawImage(img, 0, 0);
        console.log(context);
        try {
            imgData = context.getImageData(0, 0, width, height);
        } catch(e) {}

现在我发现了这个帖子：

http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/

但是我不知道如何使它符合我的需要。。

我知道这一切都是出于安全考虑，但有没有办法让这一切发生？

感谢

编辑

哦，等等。。错误是因为无法获取ImageData。。所以有没有办法让它成为"本地"

为了满足CORS，您可以在dropbox.com 等CORS友好网站上托管您的图像

然后，如果您拼写图像，则不会触发安全错误。crossOrigin="匿名"：

    var image=new Image();
    image.onload=function(){
    }
    image.crossOrigin="anonymous";
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

以下是代码和Fiddle：http://jsfiddle.net/m1erickson/4djSr/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var image=new Image();
    image.onload=function(){
        ctx.drawImage(image,0,0);
        // desaturation colors
        var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
        var data=imgData.data;
        for(var i = 0; i < data.length; i += 4) {
          var grayscale= 0.33*data[i]+0.5*data[i+1]+0.15*data[i+2];
          data[i]=grayscale;
          data[i+1]=grayscale;
          data[i+2]=grayscale;
        }
        // write the modified image data
        ctx.putImageData(imgData,0,0);
    }
    image.crossOrigin="anonymous";
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=140 height=140></canvas>
</body>
</html>

我没有足够的声誉来添加评论（但我确实有足够的信誉来回答这个问题，是吗？？），我只是想在markE的回答中添加一个必须大写Anonymous的词。

image.crossOrigin = "Anonymous"

我发现如果你创建这样的窗口快捷方式，它可以与chrome一起使用：

"C:'Program Files (x86)'Google'Chrome'Application'chrome.exe" --allow-file-access-from-files

关闭chrome并通过快捷方式启动它。

来源：https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

相关帖子：Chrome 上使用THRE.js的本地图像上的跨源图像加载被拒绝

我假设您使用的是一个没有任何web服务器的本地文件。

尝试将crossorigin="anonymous"添加到图像元素中。例如

<img src="http://example.com/foo.jpg" crossorigin="anonymous"/>

在服务器端启用CORS是一条出路，但前提是您可以访问服务器端。通过这种方式，服务器为启用CORS的图像提供服务。

相关文章：