html5：canvas.getImageDataが正しく動作しない - なぜですか？

Question

キャンバスの背景画像から選択したピクセルの色を取得しようとしましたが、（色として）すべてが0000になります。 助けてもらえますか？私のエラーはどこですか？

マイコード（JS）：

var canvas; 
var mouse_position = []; 
var color; 

$(document).ready(function(){ 
    canvas_element = $('<canvas></canvas>'); 
    canvas = canvas_element.get(0).getContext("2d"); 
    canvas_element.appendTo('body'); 
    init_canvas(); 
}); 

function init_canvas(){ 
    var img = new Image(); 
    img.src = 'static/img/albatros.jpg'; 
    img.width = 600; 
    img.height = 800; 
    canvas.drawImage(img, 0, 0); 

    $(document).mousemove(function(e){ 
     if(e.offsetX){ 
      mouse_position.x = e.offsetX; 
      mouse_position.y = e.offsetY; 
     }else if(e.layerY){ 
      mouse_position.x = e.layerX; 
      mouse_position.y = e.layerY; 
     } 

     show_color(); 

    }); 
} 


function show_color(){ 
    color = canvas.getImageData(mouse_position.x,mouse_position.y,1,1).data; 
    console.info("red: " + color[0] + " green: " + color[1] + " blue: " + color[2] + "alpha: " +color[3]); 

} 

Answer 1

私は私のスクリプトの新しいバージョンを書いて、今、それが働いています。 私はgetImageDataパラメータを誤解しました。 はここに新しいバージョンです：私はちょうど同じ問題を抱えて、それは古い質問です知っていた

var path = 'static/img/albatros.jpg', 
color = new Array(); 
img = new Image(); 
img.src=path; 
canvas = document.createElement('canvas'); 
canvas.id = 'canvas'; 
canvas.width = img.width; 
canvas.height = img.height; 
ccontext = null; 

$(document).ready(function(){ 
    $('body').prepend(canvas); 
    init_canvas(); 
}); 

function init_canvas(){ 
    ccontext = canvas.getContext("2d"); 
    ccontext.drawImage(img, 0, 0); 
    imgData = ccontext.getImageData(0, 0, $('#canvas').width(), $('#canvas').height()); 
    for(i = imgData.data.length; i--;){ 
     color[i] = imgData.data[i]; 
    } 
} 

$('#canvas').live('mousemove', function (e) { 
    var offset = $('#canvas').offset(); 
    var eX = e.pageX - this.offsetLeft; 
    var eY = e.pageY - this.offsetTop; 
    var z = eY * this.width * 4; 
    var s = eX * 4; 
    console.info("red: " + imgData.data[z+s] + " green: " + imgData.data[z+s+1] + " blue: "+ imgData.data[z+s+2] + ' alpha: ' +imgData.data[z+s+3]); 
}); 

Answer 2

が、あなたはこのようにそれを行うことができます。

//Get the mouse position IN canvas 
rect = canvas_element.getBoundingClientRect(), 
    x = e.clientX - rect.left, 
    y = e.clientY - rect.top 

//Get the data of the 1x1 px 
imageData = canvas.getImageData(x, y, 1, 1).data; 

機能getImageData()はあなたのことで、データを取得しますポジションキャンバス、全ページではありません。