使用 javascript 为 chrome 扩展截取屏幕截图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4573956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Taking screenshot using javascript for chrome extensions
提问by Sridarshan
I have made a lot of search regarding taking pictures using JS but none seem to be useful. Some say using activeX controls, which doesn't suit my situation. I was hoping to take picture using JS and upload it a server.
我已经做了很多关于使用 JS 拍照的搜索，但似乎没有一个有用。有人说使用activeX控件，这不适合我的情况。我希望使用JS拍照并将其上传到服务器。
回答by Mohamed Mansour
Since you're using this in Chrome Extensions, the Tab APIhas a method called captureVisibleTab, which allows captures the visible area of the currently selected tab in the specified window.
由于您在 Chrome 扩展程序中使用它，因此Tab API有一个名为captureVisibleTab的方法，它允许捕获指定窗口中当前选定选项卡的可见区域。
To use that you just add "tabs" to your permissionsmanifest. And from your background page, or popup (or any other extension page), you just call that method like this:
要使用它，您只需将“标签”添加到您的权限清单。从您的背景页面或弹出窗口（或任何其他扩展页面），您只需像这样调用该方法：
chrome.tabs.captureVisibleTab(null, {}, function (image) {
// You can add that image HTML5 canvas, or Element.
});
You can control the property by adding {quality: 50} and change the format too, all described within the docs mentioned above.
您可以通过添加 {quality: 50} 来控制属性并更改格式，所有这些都在上面提到的文档中进行了描述。
The beauty of HTML5, you can alter that image with HTML5 Canvas, you can manipulate, transform, modify, clip, anything you want, very easily!
HTML5 的美妙之处在于，您可以使用 HTML5 Canvas 更改该图像，您可以非常轻松地操作、转换、修改、剪辑任何您想要的东西！
Hope that is what your looking for! Happy New Years!
希望这就是您要找的！新年快乐！
回答by Todd Price
I'm not sure if this was available when the original answer was given, but Google now has an example available that shows how to take screenshots:
我不确定在给出原始答案时这是否可用，但谷歌现在有一个可用的示例来展示如何截取屏幕截图：
http://developer.chrome.com/extensions/samples.html
http://developer.chrome.com/extensions/samples.html
Search for "Test Screenshot Extension" on this page.
在此页面上搜索“测试截图扩展”。
回答by Marcin Wieprzkowicz
If you are looking for working example, I have created repo with extension which take screenshot of the entire web page. Take a look here: https://github.com/marcinwieprzkowicz/take-screenshot
如果您正在寻找工作示例，我已经创建了带有扩展名的 repo，它可以截取整个网页的屏幕截图。看看这里：https: //github.com/marcinwieprzkowicz/take-screenshot
回答by ksridhar
Here is another approach that worked for me.
The requirements were as follows:
(a) capture a screenshot in a chrome extension
(b) the screenshot must have a transparent background
(c) the screenshot must be communicated to a different process (through HTTP)
这是另一种对我有用的方法。
要求如下：
(a) 在 chrome 扩展程序中捕获屏幕截图
(b) 屏幕截图必须具有透明背景
(c) 屏幕截图必须传达给不同的进程（通过 HTTP）
In this section i will present a code fragment addressing requirement (b)
Useful references are:
chrome extensions debugger api
chrome devtools protocol debugger domain
You may want to start reading code from the last function attachToDebugger
在本节中，我将介绍代码片段寻址要求 (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);
}
});
}
回答by YRabl
If you're inside an enterprise, your IT might set the policy DisableScreenshots to true. You can check it by going into chrome://policy and search for this key.
如果您在企业内部，您的 IT 可能会将 DisableScreenshots 策略设置为 true。您可以通过进入 chrome://policy 并搜索此密钥来检查它。
