0

我正在尝试使用该简单代码从图像像素中提取颜色：

<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()作品出现在我的屏幕上。但是如果我不评论它就不会，所以这条线不起作用。为什么 ？

谢谢

4

1 回答 1

2

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

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

有点令人惊讶的是，您可以使用drawImage. 但是，在您到达的那一刻，getImageData没有要检索的数据，因此它将失败。

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

例如：

window.onload = function() {

    /// your function goes here

}
于 2013-09-12T01:50:42.390 回答