11

我正在编写一个脚本（或一起编辑和破解）来编辑页面上图像的外观。我知道 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/

但我不知道如何使它适合我的需要..

我知道这一切都是因为安全和所有这些 - 但是有没有办法让这一切发生？

谢谢

编辑

哦等等..错误是因为你不能getImageData..所以有没有让它成为“本地”

4

5 回答 5

23

为了满足 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>
于 2013-08-27T21:11:17.710 回答
6

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

image.crossOrigin = "Anonymous"
于 2015-04-01T00:21:27.640 回答
2

如果您创建这样的 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

相关文章： Chrome 上使用 THREE.js 的本地图像上的跨域图像加载被拒绝

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

于 2016-04-05T20:48:33.980 回答
2

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

<img src="http://example.com/foo.jpg" crossorigin="anonymous"/>
于 2017-03-11T07:45:23.873 回答
0

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

于 2015-03-07T22:04:45.690 回答