使用JavaScript截取Chrome扩展程序的屏幕截图

对于使用JS拍照，我进行了很多搜索，但似乎没有用。有人说使用ActiveX控件，这不适合我的情况。我希望使用JS拍照并将其上传到服务器。

由于您是在Chrome扩展程序中使用该选项卡的，因此Tab API具有一种称为captureVisibleTab的方法，该方法可捕获指定窗口中当前所选选项卡的可见区域。

要使用它，您只需在权限清单中添加“标签”即可。在后台页面或弹出窗口（或其他任何扩展页面）中，您只需调用以下方法即可：

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

您可以通过添加{quality：50}来控制属性，也可以更改格式，所有这些都在上述文档中进行了描述。

HTML5的美丽之处在于，您可以使用HTML5 Canvas更改该图像，可以轻松地操纵，变换，修改，剪辑任何想要的东西！

希望这是您的寻找！新年快乐！

我不确定在给出原始答案时是否可用，但是Google现在有一个示例显示如何拍摄屏幕截图：

http://developer.chrome.com/extensions/samples.html

在此页面上搜索“测试屏幕快照扩展”。

如果您正在寻找工作示例，我已经创建了扩展名为repo的仓库，它带了整个网页的屏幕截图。在这里看看：https : //github.com/marcinwieprzkowicz/take-screenshot

这是对我有用的另一种方法。
要求如下：
（a）以chrome扩展名捕获屏幕截图
（b）屏幕截图必须具有透明背景
（c）屏幕截图必须与其他进程通信（通过HTTP）

在本节中，我将介绍代码片段的寻址要求（b）
有用的参考资料是：
chrome扩展调试器api
chrome devtools协议调试器域
您可能想开始从最后一个函数读取代码attachToDebugger

function captureScreenshot(tabId) {

    logMsg(`{page}: captureScreenshot: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId},
        "Page.captureScreenshot", 
        {format: "png", fromSurface: true},
        response => {
            if(chrome.runtime.lastError) {
                logMsg(`{back}: captureScreenshot: status=failed, tabId=${tabId}`);
            }
            else {
                var dataType = typeof(response.data);
                logMsg(`{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}`);
                saveScreenshotRemotely(response.data);
            }
        });

    logMsg(`{page}: captureScreenshot: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function setColorlessBackground(tabId) {

    logMsg(`{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Emulation.setDefaultBackgroundColorOverride",
        {'color': {'r': 0, 'g': 0, 'b': 0, 'a': 0}},
        function () {
            logMsg(`{back}: setColorlessBackground: status=enabled, tabId=${tabId}`);
            captureScreenshot(tabId);
        });

    logMsg(`{back}: setColorlessBackground: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function enableDTPage(tabId) {

    logMsg(`{back}: enableDTPage: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Page.enable", 
        {}, 
        function () {
            logMsg(`{back}: enableDTPage: status=enabled, tabId=${tabId}`);
            setColorlessBackground(tabId);
            /*
             * you can comment 
             * setColorlessBackground(tabId);
             * and invoke 
             * captureScreenshot(tabId);
             * directly if you are not interested in having a 
             * transparent background
             */
        });

    logMsg(`{back}: enableDTPage: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function attachToDebugger(tabId) {
    chrome.debugger.attach(
        {tabId:tabId}, 
        g_devtools_protocol_version,
        () => {
            if (chrome.runtime.lastError) {
                alert(chrome.runtime.lastError.message);
                logMsg(`{back}: debugger attach failed: error=${chrome.runtime.lastError.message}`);
            }
            else {
                logMsg(`{back}: debugger attach success: tabId=${tabId}`);
                enableDTPage(tabId);
            }
        });
}

如果您在企业内部，则IT可能会将策略DisableScreenshots设置为true。您可以通过进入chrome：// policy进行检查并搜索此密钥。