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）。我做错了什么？

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

复制Fidle：http://jsfiddle.net/wilkas/MWa3k/（不在不同主机上处理正常图像）。

Answer 1

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

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

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

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

首先确保您的图片实际已加载！

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

1 个答案: