首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么HTML Canvas getImageData()不返回与刚才设置的值完全相同的值?

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

Stack Overflow用户
提问于 2010-11-30 08:07:28
回答 3查看 14K关注 0票数 21

在使用putImageData将像素写入HTML Canvas上下文时,当我再次获取它们时,我发现像素值并不完全相同。我已经发布了一个sample test page来显示这个问题。归根结底,问题是:

代码语言:javascript
复制
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;在Firefoxv3.6、Safari v5和IE9上,红色值返回为67 (全部在Windows上)。在OS上,Chrome v7、Safari v5和FirefoxV3.6也以67的形式返回。它们都不会返回到最初设置的64值!

使用setTimeout在设置和重新获取之间进行延迟没有任何区别。更改页面的背景不会有任何影响。在上下文上使用save()restore() (每个this unlikely article)没有区别。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-11-30 12:55:08

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

我会假设Chrome v8从webkit.org拿到了一个错误版本的取消预乘的代码(它以前也被破坏过,尽管我不记得最近发生过任何事情,这并不能解释windows唯一的差异)

编辑:每晚在windows上查看webkit是值得的吗?因为imagedata实现没有任何特定于平台的东西,所以它在所有webkit浏览器之间共享,并且在基于MSVC的构建中可能会被破坏

票数 16
EN

Stack Overflow用户

发布于 2010-12-17 03:13:49

HTML5规范鼓励浏览器供应商使用称为Premultiplied Alpha的东西。本质上,这意味着像素存储在32位整数中,其中每个通道包含8位颜色值。出于性能原因,浏览器使用预乘Alpha。这意味着它根据alpha值预乘颜色值。

下面是一个例子。您可以使用一种颜色,以便RGB的值为1286467。现在,为了获得更高的性能,颜色值将被alpha值预乘。因此,在Alpha值为16的情况下,所有颜色值将乘以16/256 (= 0.0625)。在这种情况下,RGB的结果值变为844.1875 (四舍五入为4,因为像素颜色值不是浮点数)。

当您执行以下操作时,问题就会显现出来:使用特定的Alpha值设置颜色数据,然后拉回实际的颜色值。当您调用4时,先前四舍五入为4的蓝色4.1875将变为64,而不是67

这就是为什么你会看到这一切,除非浏览器引擎中的底层实现更改为使用不受此影响的颜色系统,否则它永远不会改变。

票数 5
EN

Stack Overflow用户

发布于 2010-11-30 08:12:58

对我来说像是个舍入问题...

代码语言:javascript
复制
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 ;)

编辑:当然,这不能解释为什么alpha通道的行为...

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4309364

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档