Html Canvas getImageData()奇怪的问题

Html Canvas getImageData()奇怪的问题,html,canvas,pixel,Html,Canvas,Pixel,我最近遇到了一个非常奇怪的问题,请看下面的代码片段 <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

我最近遇到了一个非常奇怪的问题,请看下面的代码片段

<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>
单色图像
功能图像加载(ev){
元素=document.getElementById(“cancan”);
c=element.getContext(“2d”);
im=ev.target;//图像,假设为200x200
//阅读画布的宽度和高度
宽度=元素宽度;
高度=元素高度;
//在画布左侧标记图像:
c、 drawImage(im,0,0);
//获取所有画布像素数据
imageData=c.getImageData(0,0,宽度,高度);
console.log(imageData.data[0]+“”+imageData.data[1]+“”+imageData.data[2]);
//输出为“2435247”
//matlab和c#输出为:“237 36 27”
}
im=新图像();
im.onload=图像加载;
im.src=“imgtest1.jpg”;//图像为320x480

本例中使用的imgtest1.jpg是常量-每个像素是(237,36,27)。getImageData()返回的像素颜色不同-它比从matlab返回的颜色更亮-有什么想法吗?原因是什么

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


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

这看起来类似于我遇到的问题(不涉及Mathlab或C):这可能与颜色配置文件、gamma校正(如上所述)或预倍增alpha(尽管听起来您不是在用透明位图进行测试)。如果在不同的浏览器中进行测试,会得到不同的结果吗?