0

例如，当我在画布上绘制一个像素的图像，然后尝试查看画布上绘制的内容时，我得到了不同的颜色？在下面的代码中，第一个图像像素的颜色为 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
4

1 回答 1

1

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

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

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

您使用绿色png的任何原因？绘制绿色矩形的调用加载速度要快得多。

于 2013-08-11T16:50:47.573 回答