为什么HTML Canvas getImageData()不返回刚刚设置的完全相同的值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (192)

在使用HTML Canvas上下文将像素写入时,当我再次获取它们时,像素值不完全相同。我建立了一个示例。问题是:

var id = someContext.getImageData(0,0,1,1);
id.data[0]=id.data[3]=64; // 25% red, 25% alpha
id.data[1]=id.data[2]=0;  // No blue or green
someContext.putImageData(id,0,0);
var newData = someContext.getImageData(0,0,1,1);
console.log( newData.data[0] );

在Chrome v8上,红色的值回来了63; 在Firefox v3.6,Safari v5和IE9上,红色值会返回67

提问于
用户回答回答于

ImageData在HTML5中被定义为未被预测的,但大多数canvas实现使用预乘的后台缓冲来加速合成等。这意味着当数据被写入然后从后台缓冲区读取时,它可以改变。

用户回答回答于

看起来像一个四舍五入的问题

64/255 = 0.2509... (rounded down to give 0.25)
0.25 * 255 = 63.75 (rounded down to give 63)
== OR ==
64/255 = 0.2509... (rounded up to give 0.26)
0.26 * 255 = 66.3  (rounded up to give 67)

记住255是最大值,而不是256;)

扫码关注云+社区

领取腾讯云代金券