Question

例如，当我在画布上绘制一个像素的图像，然后尝试查看画布上绘制的内容时，我会得到不同的颜色？在下面的代码中，第一个图像像素的颜色为rgba（0,255,0,255），但是当我尝试给他带一个红色成分时，我得到的是1而不是0，为什么？

<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>

这就是我得到的：

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

Answer 1

这将完全取决于您使用的png ......即使它是data:image，浏览器也可以并且将以不同方式处理颜色配置文件。

我为你做了一个小提琴：http://jsfiddle.net/yhU8N/2/

这不使用png，而是像png一样绘制绿色（0,255,0）矩形。唯一的区别是我们知道它不包含任何类型的颜色配置文件。

你使用绿色png的原因是什么？绘制绿色矩形的调用加载速度要快得多。

Firefox中的方法DrawImage无法正确使用绿色像素？

1 个答案: