Question

我在使用JS拍照方面做了很多搜索但似乎没有用。有人说使用activeX控件，这不适合我的情况。我希望用JS拍照并上传服务器。

Answer 1

由于您在Chrome扩展程序中使用此功能，Tab API有一个名为captureVisibleTab的方法，该方法可以捕获指定窗口中当前所选标签的可见区域。

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

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

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

HTML5的美妙之处在于，您可以使用HTML5 Canvas更改该图像，您可以非常轻松地操作，转换，修改，剪辑任何您想要的内容！

希望这就是你要找的！新年快乐！

Answer 2

我不确定在给出原始答案时是否可以使用此功能，但Google现在有一个示例，说明如何截取屏幕截图：

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

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

Answer 3

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

Answer 4

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

Answer 5

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

在本节中，我将提出代码片段寻址要求（b）
有用的参考资料是：
chrome extensions debugger api
chrome devtools protocol debugger domain
您可能要开始从最后一个函数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);
            }
        });
}

使用javascript为Chrome扩展程序截取屏幕截图

5 个答案: