Question

<!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像素。有人能给我一些提示吗？上面的脚本无法正常工作？

Answer 1

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

您似乎正在将c视为canvas.getContext('2d')的结果 - 但如果您查看代码，c会保留对{{1}的调用结果}

那么，这是什么意思？您已正确捕获上下文（转换为临时变量），然后使用它来绘制图像。此绘图操作的结果是您存储到drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200);中的内容。

进行以下更改：

javascript getImageData无法获取像素值

1 个答案: