How To Sense Colors From an img with Javascript

Question

I am making a shooter simulator(ish). I have a silhouette of a person with a white background. I have it so you can shoot it. I would like the bullets to stop at the beginning of the sillhouette. You can see it here:

codepen.io/TheAndersMan/pen/WRNEmR?editors=0011

Feel free to change any of the code. Thanks in advance!

You should use vector shapes instead of an image. – SLaks Jan 03 '17 at 19:36 — SLaks, Jan 03 '17 at 19:36
@kiran.koduro sorry, I am working on it – TheAndersMan Jan 03 '17 at 19:37 — TheAndersMan, Jan 03 '17 at 19:37

score 2 · Accepted Answer · edited May 23 '17 at 12:16

2

Try using this code from here.

Version without jQuery here:

img = document.getElementById("image")
output = document.getElementById("output")

img.onmousemove = function(e) {

  if (!this.canvas) {
    this.canvas = document.createElement('canvas');
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
  }

  var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

  output.innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3];

};

Don't use images from other sites as it might be blocked.

Update: code without almost any jQuery here. Update coming.

edited May 23 '17 at 12:16

Community

1
1

answered Jan 03 '17 at 19:39

Chris Happy

7,088
2
22
49

Can you give me a version with no jQuery? I don't mean to sound ungrateful, but I prefer to use vanilla JS. – TheAndersMan Jan 03 '17 at 19:42
1

Questions with no `jQuery` tagged should be answered without the latter usage involved. :) – Adam Azad Jan 03 '17 at 19:43
Thanks @AdamAzad. Vanilla JS version added. – Chris Happy Jan 03 '17 at 20:02
1

@ChrisHappy this question is pretty much a duplicate of the question linked, you shouldn't answer questions like this. – Jacob G Jan 03 '17 at 20:09
@JacobGray The other question provided a jQuery solution, I think I provided a different solution based on the code of another question. – Chris Happy Jan 03 '17 at 20:14
@ChrisHappy it's a question about canvas. The concept, and the code that gets the color is the exact same no matter what the OP is using. – Jacob G Jan 03 '17 at 20:30

How To Sense Colors From an img with Javascript

1 Answers1