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

How to get pixel data from canvas which contains the screenshot generated by a chrome extension?

本文关键字：chrome 包含 扩展 屏幕截图 布中 获取 数据 像素数 像素      更新时间：2023-09-26

我试图实现一个非常简单的颜色选择器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…]

一打开就包含了很多信息，除了我需要的那个。

干杯!

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

或在此函数之外定义它们(如果已经这样做，则不显示)。

相关文章：