jquery - 为什么在此示例中获取图像 X、Y 像素颜色不起作用？

Question

我正在尝试使用此答案( http://goo.gl/9OZp1P )中提供的示例来获取图像 X,Y 像素颜色。

$('#map').mousemove(function(e) {          
            if(!this.canvas) {
                this.canvas = $('<canvas/>').css({width:this.width + 'px', height: this.height + 'px'})[0];
                this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
            }
            var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
            console.log(pixelData);

            $('#output').html("X coordinate: "+event.offsetX+"<br>Y coordinate: "+event.offsetY+"<br>RED: "+pixelData[0]);
        });

已复制代码，但它仅显示左上角图像某些部分的颜色，其他所有内容均为零(对于 RGB)。我做错了什么？

由于 Fiddle 不允许上传图像，并且不允许从不同主机抓取图像颜色，请在此处找到实时代码:http://wilkas.comxa.com/pixel_info.html

复制到 fiddle :http://jsfiddle.net/wilkas/MWa3k/ (由于图像在不同的主机上无法工作)。

Answer 1

您必须将 Canvas 的宽度和高度属性设置为与图像相同，而不是其 CSS 值。

这些属性确定实际的像素数，如果未明确指定，则默认为 300x150。 CSS 确定从屏幕像素到 Canvas 像素的坐标映射。

如果仔细查看坐标，您会发现只能正确检索最大 300x150 的值。

this.canvas.width = this.width;
this.canvas.height = this.height;

首先请确保您的图像已实际加载!