我正在尝试在用户单击的位置从图像中选择一种颜色。
但是传统的方式，即画布限制我访问我的图像文件
直接来自我的 parse.com 数据库，即 "http://files/kj.jpg" 显示错误为：
无法从画布获取图像数据，因为画布已被跨域数据污染。欢迎：1 ImageColor Picker：无法访问图像数据。这可能是由于您使用的浏览器（IE 不起作用）或图像和脚本保存在不同的服务器上，或者您在本地运行脚本。
这是由于图像的 url。但是我们必须使用相同的 url，因为我们不能每次都将图像本地保存到客户端 PC，因为这会降低应用程序的质量。
我正在寻找的是有什么方法可以让我获得点击点的颜色。 如果没有，请提出任何替代方案。
谢谢你， 桑托什·乌帕德哈耶
【问题讨论】：
标签： javascript jquery css canvas parse-platform
您遇到跨域安全违规（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>
【讨论】：