0

I want to get color of a x y pixel with javascript/jquery, so googled and found that it could be done with canvas.

var canvas = $("<canvas>"); //Create the canvas element

//Create a layer which overlaps the whole window
canvas.css({ position: "fixed", top: "0", left: "0",
    width: "100%", height: "100%", "z-index": 9001
});

//Add an event listener to the canvas element
canvas.click(function (ev) {
    var x = ev.pageX, y = ev.pageY;
    var canvas = this.getContext("2d");
    canvas.drawWindow(window, x, y, 1, 1, "transparent");
    var data = canvas.getImageData(0, 0, 1, 1).data;
    var hex = rgb2hex(data[0], data[1], data[2]);
    alert(hex);
    $(this).remove();
});

but its not working (drawWindow in firefox not working, not working in chrome too).
any ideas ?

Ashok Damani
  • 3,896
  • 4
  • 30
  • 48
  • did you actually assigned canvas element to DOM? `$('body').append(canvas);` – gondo Apr 23 '14 at 05:34
  • 1
    http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image – Bharadwaj Apr 23 '14 at 05:37
  • @Bharadwaj : see its not working http://jsfiddle.net/9SEMf/938/ – Ashok Damani Apr 23 '14 at 06:17
  • 1
    @AshokDamani It is not working because the image is from other domain. You will get a security level exception as `The canvas has been tainted by cross-origin data.` at `getImageData`. Download the image to your project folder and try. I will work & it worked for me. – Bharadwaj Apr 23 '14 at 06:57
  • @Bharadwaj : awesome it is !!! – Ashok Damani Apr 23 '14 at 07:54

1 Answers1

1

drawWindow is a custom JavaScript implementation. You have to include it before you can use it.

If you are referring to the native method drawWindow(), it cannot be used in a web content that's why it won't work.

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247