1

我正在尝试使用此答案（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）。我做错了什么？

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

在 Fidle 上复制：http: //jsfiddle.net/wilkas/MWa3k/（在不同的主机上无法正常工作）。

4

1 回答 1

3

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

这些属性决定了实际的像素数，如果没有明确指定，默认为 300x150。CSS 确定从屏幕像素到画布像素的坐标映射。

如果您仔细查看您的坐标，您会发现只有高达 300x150 的值被正确检索。

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

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

于 2013-10-28T09:54:28.213 回答