0 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Canvas</title>

    <script>
        window.onload = function () {
            var preview = document.getElementById('preview');
            var r = document.getElementById('r');
            var g = document.getElementById('g');
            var b = document.getElementById('b');
            var a = document.getElementById('a');

            var canvas = document.getElementById('myCanvas');

            var building = new Image();
            building.src = "img/cinema.png";

            building.onload = function(){
                var c = canvas.getContext('2d').drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200);

                var img = c.getImageData(150, 160, 1, 1);

                var idata = img.data;

                var red = idata[0];
                var green = idata[1];
                var blue = idata[2];
                var alpha = idata[3];

                r.innerHTML = red;
                g.innerHTML = green;
                b.innerHTML = blue;
                a.innerHTML = (alpha > 0) ? alpha : 'Transparent';
            }
        }
    </script>

    <style type="text/css" media="screen">
        body { margin: 0px; padding: 0px; }

        ul li { font-weight: bold; }
        ul li span { font-weight: normal; }
    </style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">

</canvas>
<ul>
    <li><div id="preview"></div></li>
    <li>Red: <span id="r">NULL</span></li>
    <li>Green: <span id="g">NULL</span></li>
    <li>Blue: <span id="b">NULL</span></li>
    <li>Alpha: <span id="a">NULL</span></li>
</ul>
</body>
</html>

我只想测试 getImageData 函数。

图像可以在 chrome 上显示，但值iData[]全为 NULL。

我使用的 png 是 256*200 像素。谁能给我一些提示为什么上面的脚本不能工作？

4

1 回答 1

0

不，那行不通-如果您没有发现它c的价值与您想象的不同，我会感到惊讶。

您似乎将其c视为结果canvas.getContext('2d')- 但是如果您查看代码，c则保留调用的结果drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200);

那么这是什么意思？您已经正确地获取了上下文（进入一个临时变量），然后用它来绘制图像。此绘图操作的结果就是您存储到c.

进行以下更改：

var c = canvas.getContext('2d');
c.drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200);

var img = c.getImageData(150, 160, 1, 1);
于 2013-11-10T07:21:56.017 回答