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

フィドルにコピー: http://jsfiddle.net/wilkas/MWa3k/ (別のホストでイメージが動作しない)。

4

1 に答える 1

3

widthCanvas のおよびheight プロパティを、CSS 値ではなく、画像と同じになるように設定する必要があります。

プロパティは実際のピクセル数を決定し、明示的に指定されていない場合はデフォルトで 300x150 になります。CSS は、スクリーン ピクセルからキャンバス ピクセルへの座標マッピングを決定します。

座標を注意深く見ると、300x150 までの値のみが正しく取得されていることがわかります。

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

まず、イメージが実際にロードされていることを確認してください!

于 2013-10-28T09:54:28.213 に答える