如何从包含Chrome扩展程序生成的屏幕截图的画布中获取像素数据？ [英] How to get pixel data from canvas which contains the screenshot generated by a chrome extension?

问题描述

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

1. 利用chrome提供的captureVisibleTab API，定期取得目前网页的萤幕撷取画面。


2. 在画布中加载此屏幕截图，然后对canvas上下文使用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 ...] 
  
 
 
 
除了我需要的信息之外，开头包含了很多信息。
 
 
 
干杯！ / p> 
 
解决方案
由于javascript是区分大小写的，您的 onLoad 没有驼峰事件）。尝试改为小写：
  // onload not onLoad 
 img.onload = function（）{
 canvasContext.drawImage（img，0，0）; 
} 
  
 
 
我也注意到你把画布和上下文放在全局范围。我猜想（我不熟悉Chrome的扩展api）api防止或隔离窗口对象（封印或冻结它）。
 
 
 
修改这些，我很漂亮
  //在前面使用'var'
 var canvas = document .createElement（'canvas'）; 
 var canvasContext = canvas.getContext（'2d'）; 
  
或在此函数外定义它们（如果您已经执行此操作， p> 
I am trying to implement a very simple color picker chrome extension. The idea is simple.

make use of the captureVisibleTab API provided by chrome to get screenshot of current page at regular intervals.
load this screenshot in a canvas and then use get getImageData method for canvas context and display color values of the pixel based on the mouse coordinates.
I thought the idea was fairly simple to implement, but it actually did not turn out so well. Any help with the following snippets would be helpful:

background.js (working perfectly!)
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);
    });
});
Please expect the surrounding code to be working correctly (like the simple activate extension button) and all relevant permissions granted in the manifest.

The output generated for pixelData looks Like:
[0, 0, 0, 0, byteLength: 4, byteOffset: 0, buffer: ArrayBuffer, subarray: function, set: function…]
which on opening contains lot's of info, except the one I need.

Cheers!
解决方案
As javascript is case-sensitive your onLoad will never kick in (no camel-case for events). Try to lower-case it:
// onload not onLoad
img.onload = function(){
    canvasContext.drawImage(img, 0, 0);
}
I also noticed you put the canvas and context on the global scope (window). I would guess (I am not familiar with Chrome's extension api) that the api prevents or isolates the window object (seals or freezes it).

Modify these and I am pretty sure, wo/ testing, it would work:
//use 'var' in front
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
or define them outside this function (you don't show if you do this already).

                        
这篇关于如何从包含Chrome扩展程序生成的屏幕截图的画布中获取像素数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！