Search code examples
javascriptjquerycsscanvasparse-platform

How to get the color from the image which is from different domain or server?

I am trying to pick a color from the image at point where user click. But the traditional way ie canvas is restricting me to access my image file directly from my parse.com database ie "http://files/kj.jpg" showing error as:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. welcome:1 ImageColor Picker: Unable to access image data. This could be either due to the browser you are using (IE doesn't work) or image and script are saved on different servers or you run the script locally.

Which is due to the url of the image. But we have to use the same url because we cannot ssave the image locally every time to client pc as that will degrade quality of the app.

What am looking is that is there any way that i can get the color of the clicked point. If no please suggest any alternatives.

Thanking you, Santosh Upadhayay

Solution

  • You are experiencing cross-origin security violations (CORS violations).

    Perhaps the simplest workaround is to host your images on a site that allows downloading images anonymously. Then the CORS error will not be triggered and your color-picker can work.

    One such site is Dropbox.com.

    The only app change you need to make is to set your image's crossOrigin flag to anonymous.

    // 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";

    Here's full code and a Fiddle: 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>