画布已被跨域数据工作污染答案

【问题标题】：canvas has been tainted by cross-origin data work around画布已被跨域数据工作污染
【发布时间】：2017-03-11 15:45:23
【问题描述】：

我正在编写一个脚本（或一起编辑和破解）来编辑页面上图像的外观。我知道 javascript 的基础知识，但这是我第一次看画布。所以请多多包涵

我收到此错误：

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

所以这是我的代码 sn-p 抛出错误：

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..所以可以将其设为“本地”

【问题讨论】：

不，您不能解决安全问题。也许看看ways to circumvent the SOP
我找到了这个..maxnov.com/getimagedata 我会尝试解决这个问题 - 它似乎是在正确的方向。
@Ken-AbdiasSoftware：不，你不能。该演示也使用了 CORS。
正如 markE 所写...更多详情请参见链接https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

标签： javascript canvas cors

【解决方案1】：

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

那么如果你指定 image.crossOrigin="anonymous" 则不会触发安全错误：

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

这是代码和小提琴：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>

【讨论】：

非常感谢。早上我会再次陷入困境，看看这是否能解决问题。

【解决方案2】：

我没有足够的声誉来实际添加评论（但我确实有足够的能力来回答这个问题，嗯？？），我只是想在 markE 的回答中添加我必须大写 Anonymous 的内容。

image.crossOrigin = "Anonymous"

【讨论】：

【解决方案3】：

如果您创建这样的 Windows 快捷方式，我发现它适用于 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

相关帖子： Cross-origin image load denied on a local image with THREE.js on Chrome

我假设您正在使用没有任何网络服务器的本地文件。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

在服务器端启用 CORS 是一种出路，但前提是您可以访问服务器端。这样，服务器就会提供支持 CORS 的图像。

【讨论】：