Question

我试图用这个简单的代码从图像像素中拾取颜色：

<body>
    <img src="image.png" id="monImage"/>
    <canvas id="myCanvas"></canvas>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            var img = $('#monImage')[0];
            var canvas = $('#myCanvas')[0];
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

            var pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1);

            alert("test");
        });
    </script>
</body>

我正在使用jquery，因此选择元素更容易。如果我评论这一行：

var pixelData = canvas.getContext('2d').getImageData(1, 1, 1, 1);

然后alert()工作并在我的屏幕上显示。但是，如果我不评论它没有，所以该行不起作用。为什么？

由于

Answer 1

在您的功能执行时，图像未完成加载（图像数据不可用）。

图像元素无效，因此您可以阅读其属性。这就是它之前没有失败的原因，但它的width和height属性将为0。

有点令人惊讶的是，您可以使用drawImage执行该行。但是，当你到达getImageData时，没有要检索的数据，因此它将失败。

您需要将代码放在窗口load事件处理程序中，或者向图像元素添加事件监听器。

例如：

window.onload = function() {

    /// your function goes here

}

为什么我的画布getImageData不起作用？

1 个答案: