Canvas getImageData() 奇怪的问题答案

【问题标题】：Canvas getImageData() bizarre issueCanvas getImageData() 奇怪的问题
【发布时间】：2013-02-28 20:21:29
【问题描述】：

我最近遇到了一个很奇怪的问题，请看下面的代码sn-p

<canvas id="cancan" width="320", height="480">One color image</canvas>

<script type="text/javascript">
function imageLoaded(ev) {
    element = document.getElementById("cancan");
    c = element.getContext("2d");

    im = ev.target; // the image, assumed to be 200x200

    // read the width and height of the canvas
    width = element.width;
    height = element.height;

    // stamp the image on the left of the canvas:
    c.drawImage(im, 0, 0);

    // get all canvas pixel data
    imageData = c.getImageData(0, 0, width, height);     
    console.log(imageData.data[0] + " " + imageData.data[1] + " " + imageData.data[2]);
    // output is "243 52 47"
    // matlab and c# output is: "237 36 27"
}

im = new Image();
im.onload = imageLoaded;
im.src = "imgtest1.jpg"; // image is 320x480

</script>

在这个例子中使用的imgtest1.jpg 是常数——每个像素是(237,36,27)。 getImageData() 返回的像素颜色不同 - 它比从返回的颜色更亮 - 例如 - matlab - 任何想法可能是什么原因？

【问题讨论】：

它看起来类似于我遇到的问题（不涉及 Mathlab 或 C#）：stackoverflow.com/questions/8388106/…
这可能与颜色配置文件、伽马校正（如上所述）或预乘 alpha（尽管听起来不像是在使用透明位图进行测试）有关。如果你在不同的浏览器中测试，你会得到不同的结果吗？

标签： html canvas pixel

【解决方案1】：

亮度或亮度或强度可以计算为 (R+G+B)/3（参见 HSI 颜色代码）。在您的示例代码结果之后，很明显您的输出图像比原始图像亮一点，因为您的 R-G-B 值高于原始值（来自Matlab 或 C++）。

问题必须是“为什么您的代码计算出更高的值？”。我不知道，但您可以重新调整这些值以获得相同的亮度。

【讨论】：