Method DrawImage in Firefox does not work correctly with green pixels?

StackOverflow https://stackoverflow.com/questions/18161790

Question

For example, when I paint on canvas image of one pixel, and then attempt to see what is painted on the canvas, I get a different color? In the code below, the first image pixel has a color rgba (0,255,0,255), but when I try to bring him a red component, then I get a 1 instead of 0, why?

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="bg" align="center" id="head">
      <canvas id="canvas" width="1" height="1"></canvas>
    </div>
    <div align="center">
      <h1 id="result">loading...</h1>
      <i><pre id="nav">loading...</pre></i>
      <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY2D4z/AfAAQBAf9eLuGlAAAAAElFTkSuQmCC" height="10%" border="1" />
    </div>
    <script type='text/javascript'>
      function foo()
      {
        var img=document.getElementById('img');
        var w=img.naturalWidth;
        var h=img.naturalHeight;
        canvas.getContext('2d').drawImage(img,0,0,w,h);
        var data=canvas.getContext('2d').getImageData(0,0,w,h).data;
        document.getElementById('result').innerHTML = "data[0] == "+data[0];
        document.getElementById('nav').innerHTML = navigator.userAgent;
      };
      setTimeout(foo,100);
    </script>
  </body>
</html>

That's what I get:

data[0] == 1
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0
Was it helpful?

Solution

This is going to be completely dependent on the png your using... even though it's data:image, browsers can and will handle the color profiles differently.

I made a fiddle for you : http://jsfiddle.net/yhU8N/2/

This doesn't use the png, instead it draws a green (0,255,0) rect just as your png was doing. Only difference is that we know it doesn't contain a color profile of any type.

Any reason your using a green png? The call to draw a green rect it far faster to load.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top