无法从canvas getImageData获取正确的数据

Question

这是问题How to get pixel data from canvas which contains the screenshot generated by a chrome extension?的后续问题，源代码可在此处https://github.com/whizzzkid/ColorHelper-Chrome/

我在这里面临的问题是，我期望它输出的颜色不正确，似乎是相当随机的值。任何有关这方面的帮助将不胜感激。

active  = false;    
imgData = canvas = canvasContext = pixelData = "";
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.action == 'toggle'){
        if(active){
            active  = false;
            $('#colorInfoContainer').remove();
            console.log(active);
        }else{
            active  = true;
            $('body').prepend("<div id=\"colorInfoContainer\" style=\"color: #000; text-align: center; top:0; width: 200px; position: fixed; left: 60%; margin-left: -100px; height: 15px; margin-top: -5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fff; padding: 5px 5px 5px; font: bold 14px Arial; border: 3px solid; z-index: 999999999999;\"><div id=\"colorInfo\" style=\"display: block;\">Color Info</div></div>");
            console.log(active);
            fill_canvas();
        }
    }
});

function fill_canvas(){
    if(active){
        chrome.extension.sendMessage({action: 'capture'}, function(response) {
            canvas = document.createElement('canvas');
            canvas.width= document.documentElement.clientWidth;
            canvas.height= document.documentElement.clientHeight;
            canvasContext = canvas.getContext('2d');
            var img = new Image();
            img.onload = function(){
                canvasContext.drawImage(img, 0, 0);
            }  
            img.src = response.imageUrl;
            console.log(img.src);
        });
    }
}

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

$(document).ready(function(){
    setInterval(fill_canvas,1000);
    $(window).mousemove(function(e) {
        if(active){
            //cache the position of canvas:
            var canvasPos = getPosition(canvas),
            dx = canvasPos.x,
            dy = canvasPos.y;
            //getting the correct color from pixels
            var x = e.clientX - dx,
                y = e.clientY - dy;
            //force x and y to stay within canvas:
            x = (x < 0) ? 0 : (x > canvas.width  - 1) ? canvas.width  - 1 : x;
            y = (y < 0) ? 0 : (y > canvas.height - 1) ? canvas.height - 1 : y;
            pixelData = canvasContext.getImageData(x, y, 1, 1).data;
            //console.log(canvasContext);
            //pixelData = canvasContext.getImageData(e.clientX,e.clientY, 1, 1).data;
            //console.log(x+','+y);
            console.log(pixelData);
            $('#colorInfoContainer').css('background-color','rgba('+pixelData[0]+', '+pixelData[1]+', '+pixelData[2]+', '+pixelData[3]+')')
        }
    });
});

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    console.log('button clicked');
    chrome.tabs.sendMessage(tab.id, { action: 'toggle' });
});

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action == 'capture') {
        chrome.tabs.captureVisibleTab(null, { 'format':'png' }, function(dataUrl) {
            sendResponse({ imageUrl: dataUrl });
        });
    }
    return true;
});

上面提到的代码创建了一个div，它应该与鼠标下的颜色相同。

编辑：根据@Ken - Abdias Software的更新进行更新。但仍然失败。需要帮助！ 干杯！