Javascript 如何从包含chrome扩展生成的屏幕截图的画布中获取像素数据？

我正在尝试实现一个非常简单的颜色选择器chrome扩展。这个想法很简单

利用chrome提供的captureVisibleTab API定期获取当前页面的屏幕截图

将此屏幕截图加载到画布中，然后对画布上下文使用get getImageData方法，并基于鼠标坐标显示像素的颜色值

我认为这个想法实施起来相当简单，但结果却不是那么好。有关以下代码段的任何帮助都会很有帮助：

background.js（工作正常！）

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…]

除了我需要的那一条外，它在开头包含了很多信息

---

干杯

由于javascript区分大小写，因此您的

onLoad

将永远不会生效（事件没有驼峰大小写）。尽量降低它的大小写：

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

我还注意到您将画布和上下文放在全局范围（窗口）上。我猜（我不熟悉Chrome的扩展api），api阻止或隔离窗口对象（密封或冻结它）

修改这些，我很确定，wo/测试，它会起作用：

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

---

或者在此函数之外定义它们（您不显示是否已经这样做了）。

您表示我们应该期望周围的代码正常工作，但我仍然需要询问您是否仔细检查了该响应。imageUrl是否确实包含任何数据？（如果您使用console.log（response.imageUrl）它包含什么）。hi@Ken AbdiasSoftware它包含dataurl，它在浏览器中作为图像打开。这是选项卡中当前可见区域的屏幕截图。请参考此粘贴并尝试在浏览器中打开数据url。即使我这么认为。但这会产生一个未捕获的TypeError:Type error content_script.js:img.onload谢谢@Ken，工作正常。在某种程度上，但可以给我确切的颜色细节，脱口而出的随机颜色通常是白色。请帮帮我@whizzkid如果你觉得答案是正确的，你可以在柜台左上方的下方将其标记为正确。请帮我解决这个问题

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