如何從畫布獲取像素數據，其中包含由chrome擴展程序生成的屏幕截圖？

Question

我正在嘗試實現一個非常簡單的拾色器chrome擴展。 這個想法很簡單。

1. 利用chrome提供的captureVisibleTab API定期獲取當前頁面的屏幕截圖。
2. 將此截圖加載到畫布中，然后對畫布上下文使用get getImageData方法，並基於鼠標坐標顯示像素的顏色值。

我認為這個想法實施起來很簡單，但實際上效果並不理想。 以下代碼段的任何幫助都將有所幫助：

background.js（完美運行！）

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

content_script.js

function fill_canvas(){
    chrome.extension.sendMessage({action: 'capture'}, function(response) {
        canvas = document.createElement('canvas');
        canvas.width= $(window).width();
        canvas.width= $(window).height();
        canvasContext = canvas.getContext('2d');
        var img = new Image();
        img.onLoad = function(){
            canvasContext.drawImage(img, 0, 0);
        }  
        img.src = response.imageUrl;
    });
}
$(document).ready(function(){
    fill_canvas();
    $(document).mousemove(function(e) {
        pixelData   = canvasContext.getImageData(e.offsetX,e.offsetY, 1, 1).data;
        console.log(pixelData);
    });
});

請期望周圍的代碼正常工作（例如簡單的激活擴展按鈕），並且清單中授予所有相關權限。

為pixelData生成的輸出如下所示：

[0, 0, 0, 0, byteLength: 4, byteOffset: 0, buffer: ArrayBuffer, subarray: function, set: function…]

除了我需要的信息外，打開時其中包含很多信息。

干杯!

Answer 1

由於javascript區分大小寫，因此您的onLoad將永遠不會啟動（事件不會出現駝峰式情況）。 嘗試小寫：

// onload not onLoad
img.onload = function(){
    canvasContext.drawImage(img, 0, 0);
}

我還注意到您將畫布和上下文放在了全局范圍（窗口）上。 我猜（我不熟悉Chrome的擴展API），該API會阻止或隔離窗口對象（將其密封或凍結）。

修改這些，我很確定，可以進行測試：

//use 'var' in front
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');

或在此函數之外定義它們（如果已經執行過操作，則不會顯示）。