1

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

  1. 利用 chrome 提供的 captureVisibleTab API 定期获取当前页面的截图。
  2. 将此屏幕截图加载到画布中，然后使用 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…]

打开时包含很多信息，除了我需要的信息。

干杯!

4

1 回答 1

2

由于 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');

或者在这个函数之外定义它们（如果你已经这样做了，你不会显示）。

于 2013-05-28T03:16:51.620 回答