Question

我正在编写脚本（或编辑和黑客攻击的东西）来编辑页面上的图像外观。我知道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 ..所以有没有让它'本地'

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

Answer 2

我没有足够的声誉来实际添加评论（但我确实有足够的回答这个问题，嗯??），我只想添加到markE的答案，我必须将Anonymous大写。

image.crossOrigin = "Anonymous"

Answer 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

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

Answer 4

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

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

Answer 5

在服务器端启用CORS是一种解决方法，但如果您有权访问服务器端则可以。这样服务器就可以提供支持CORS的图像。

画布受到跨源数据工作的污染

5 个答案: