为什么HTML Canvas getImageData（）不返回刚刚设置的完全相同的值？ [英] Why does HTML Canvas getImageData() not return the exact same values that were just set?

问题描述

当使用 putImageData 将像素写入HTML Canvas上下文时，我发现当我再次提取像素值时，像素值不完全相同。我已举起样品测试页显示问题。归结起来，问题是：

  var id = someContext.getImageData（0,0,1,1）; 
 id.data [0] = id.data [3] = 64; // 25％红色，25％alpha 
 id.data [1] = id.data [2] = 0; //没有蓝色或绿色
 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 （全部在Windows上）。在OS X上，Chrome v7，Safari v5和Firefox v3.6也会以 67 的形式显示。由于 64 值原来设置，所以它们都不会返回。

使用 setTimeout 到设置和重新获取之间的延迟没有什么区别。改变页面的背景没有区别。在上下文（ save（）和 restore（）

ImageData在HTML5中定义为不重复，但是大多数画布实现使用预乘的后备缓冲区来加速合成等。这意味着当数据被写入然后从

我假设Chrome v8从webkit.org上找到了一个有关[un]的重载代码的bug版本（它已经被破坏了，虽然我不记得任何最近的事件，这不解释窗口只有方差）

When writing pixels to an HTML Canvas context using putImageData I find that the pixel values are not exactly the same when I fetch them again. I have put up a sample test page showing the problem. Boiled down, the problem is:

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] );

On Chrome v8, the red value comes back as 63; on Firefox v3.6, Safari v5, and IE9 the red value comes back as 67 (all on Windows). On OS X, Chrome v7, Safari v5, and Firefox v3.6 also come back as 67. None of them come back as the 64 value originally set!

Using setTimeout to delay between setting and re-fetching makes no difference. Changing the background of the page makes no difference. Using save() and restore() on the context (per this unlikely article) makes no difference.

解决方案

ImageData is defined in HTML5 as being unpremultiplied, but most canvas implementations use a premultiplied backing buffer to speed up compositing, etc. This means that when data is written and then read from the backing buffer it can change.

I would assume that Chrome v8 picked up a buggy version of the [un]premultiplying code from webkit.org (It has been broken before, although i don't recall any recent occurances, and that doesn't explain the windows only variance)

[edit: it could be worth checking a webkit nightly on windows? as the imagedata implementation doesn't have anything platform specific it's shared between all webkit browsers and could simply be broken in MSVC based builds]

这篇关于为什么HTML Canvas getImageData（）不返回刚刚设置的完全相同的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！