0

我正在尝试在用户单击的位置从图像中选择一种颜色。但是传统的方式，即画布限制我直接从我的 parse.com 数据库访问我的图像文件，即"http://files/kj.jpg"显示错误为：

无法从画布获取图像数据，因为画布已被跨域数据污染。欢迎：1 ImageColor Picker：无法访问图像数据。这可能是由于您使用的浏览器（IE 不起作用）或图像和脚本保存在不同的服务器上，或者您在本地运行脚本。

这是由于图像的网址。但是我们必须使用相同的 url，因为我们不能每次都将图像本地保存到客户端 PC，因为这会降低应用程序的质量。

我正在寻找的是有什么方法可以让我获得点击点的颜色。如果没有，请提出任何替代方案。

谢谢你，桑托什·乌帕德哈伊

4

1 回答 1

1

您遇到跨域安全违规（CORS 违规）。

也许最简单的解决方法是将图像托管在允许匿名下载图像的站点上。然后不会触发 CORS 错误，并且您的颜色选择器可以工作。

Dropbox.com 就是这样一个网站。

您需要进行的唯一应用更改是将图像的 crossOrigin 标志设置为匿名。

// create a new image object

var img=new Image();

// set its crossOrigin flag to anonymous
// to allow downloading from dropbox.com (or any X-domain enabled site)

img.crossOrigin="anonymous";

这是完整的代码和小提琴：http: //jsfiddle.net/m1erickson/y2P79/

<!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; padding:20px;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var img=new Image();
    img.onload=function(){
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);
    }
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";


    $("#canvas").click(function(e){
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        // desaturation colors
        var imgData=ctx.getImageData(mouseX,mouseY,1,1);
        var data=imgData.data;

        $("#results").text("Color at "+mouseX+"/"+mouseY+" is rgba("
            +data[0]+","+data[1]+","+data[2]+","+data[3]+")");
    });

}); // end $(function(){});
</script>

</head>

<body>
    <p id="results">Click to get color</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-10-16T15:28:37.967 回答