Why is the canvas painted with a slightly different color than the image itself?

Question

I draw an image onto an HTML canvas and get image data from it to find the colors of specific pixels. An image is a map in which each country is distinguished by color. I want to cross out the color returned by .getImageData () into the list of colors I made manually to determine which country the given pixel is in.

My problem is that the image that I draw on the canvas and the image that is painted are slightly different from each other.

This is the original image drawn on canvas:

This is the image that I get when loading a canvas in PNG format:

, , , . , 73,73,73,255, - 71,71,71,255.

, , , , .

.

- , :

HTML:

<img scr="active_map.png" class="active" id="activeImage">
<canvas id="activeCanvas" width="439px" height="245px">Your Browser Doesn't Support HTML5 Canvases... Sorry :( </canvas>

JS:

var activeCanvas = document.getElementById('activeCanvas')
var activeContext = activeCanvas.getContext("2d");
var activeImage = document.getElementById('activeImage')
activeContext.drawImage(activeImage,0,0);
var activePixelData = activeContext.getImageData(0,0,439,245)["data"];

, Firefox 31 Ubuntu

-

Answer 1

@GameAlchemist, - PNG, , RGB .

PNG Gamma "" . :

-, - , , - , , , . PNG () . , , .

Pngcrush, , . (pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png). :

, 6 . , Firefox ( RGB 71, 71, 71 73, 73, 73).

Answer 2

( GameAlchemist) -.

, FF.

:

• , , .

• , , . .getImageData, 1 - .

• , . context.isPointInPath , . DougX : http://dougx.net/map/

• , , . :

  • 9x4 ( 4x2 - ).
  • . : {x0: 297, x1: 353 y0: 91, y1: 94 : 55} countryCodes [55] = 'China'. (353-297) * (94-91) == 224 .
  • mouseclick , , , [x, y]. , , , , .