blocks|key|836761|text|由于您在Chrome扩展中使用了此方法，因此Tab+API有一个名为captureVisibleTab的方法，它允许捕获指定窗口中当前选定选项卡的可见区域。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|836762|要使用它，您只需在permissions清单中添加“标签”即可。在你的背景页面，或者弹出窗口(或任何其他扩展页面)中，你只需要像这样调用这个方法：|836763|chrome.tabs.captureVisibleTab(null,+{},+function+(image)+{
+++//+You+can+add+that+image+HTML5+canvas,+or+Element.
});|code-block|syntax|javascript|836764|您可以通过添加{quality:+50}来控制属性，也可以更改格式，所有这些都在上面提到的文档中进行了描述。|836765|HTML5的美，你可以用HTML5画布改变图像，你可以操作，转换，修改，裁剪，任何你想要的，非常容易！|836766|希望这就是你想要的！新年快乐！|836767|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.chrome.com/extensions/tabs|1|http://developer.chrome.com/extensions/tabs#method-captureVisibleTab|2|https://developer.chrome.com/extensions/manifest#permissions^0|M|7|0|Y|H|1|0|9|B|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|F|3|G|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1E|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

Since you're using this in Chrome Extensions, the <a href="http://developer.chrome.com/extensions/tabs" rel="noreferrer">Tab API</a> has a method called <a href="http://developer.chrome.com/extensions/tabs#method-captureVisibleTab" rel="noreferrer">captureVisibleTab</a>, which allows captures the visible area of the currently selected tab in the specified window.

To use that you just add "tabs" to your <a href="https://developer.chrome.com/extensions/manifest#permissions" rel="noreferrer">permissions</a> manifest. And from your background page, or popup (or any other extension page), you just call that method like this:

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

You can control the property by adding {quality: 50} and change the format too, all described within the docs mentioned above.

The beauty of HTML5, you can alter that image with HTML5 Canvas, you can manipulate, transform, modify, clip, anything you want, very easily!

Hope that is what your looking for! Happy New Years!

blocks|key|1051541|text|我不确定在给出原始答案时这是否可用，但Google现在有一个示例，展示了如何截图：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1051542|http://developer.chrome.com/extensions/samples.html|offset|length|1051543|在此页面上搜索“测试屏幕截图扩展”。|1051544|更新:下面是使用desktopCapture接口的新示例：|style|CODE|1051545|https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture|1051546|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1F|0|0|0|8|E|0|0|2O|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@$D|12|E|13|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|C]]|U|$5|Q|R|S|A|$T|M]]]]

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:
<a href="http://developer.chrome.com/extensions/samples.html" rel="nofollow noreferrer">http://developer.chrome.com/extensions/samples.html</a>
Search for &quot;Test Screenshot Extension&quot; on this page.
UPDATE: Here's the new example using the <code>desktopCapture</code> API:
<a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture" rel="nofollow noreferrer">https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture</a>

blocks|key|836874|text|如果你正在寻找工作的例子，我已经创建了带扩展的repo，这需要整个网页的屏幕截图。看看这里：https://github.com/marcinwieprzkowicz/take-screenshot|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|836875|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/marcinwieprzkowicz/take-screenshot^0|1A|1H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

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: <a href="https://github.com/marcinwieprzkowicz/take-screenshot">https://github.com/marcinwieprzkowicz/take-screenshot</a>

blocks|key|1051714|text|这是另一种对我有效的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1051715|要求如下：|1051716|(a)在chrome扩展中捕获屏幕截图|1051717|(b)截图必须有透明的背景|1051718|(c)必须将屏幕截图传送到不同的进程(通过HTTP)|1051719|在本节中，我将介绍一个代码片段寻址要求(b)|1051720|有用的参考资料包括：|1051721|chrome+extensions+debugger+api|offset|length|1051722|chrome+devtools+protocol+debugger+domain|1051723|您可能希望从最后一个函数attachToDebugger开始读取代码|style|CODE|1051724|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);
++++++++++++}
++++++++});
}|code-block|syntax|javascript|1051725|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.chrome.com/extensions/debugger|1|https://chromedevtools.github.io/devtools-protocol/tot/Debugger^0|0|0|0|0|0|0|0|0|U|0|0|0|14|1|0|C|G|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1J|8|@]|9|@$P|1K|Q|1L|1|1M]]|A|$]]|$1|R|3|S|5|6|7|1N|8|@]|9|@$P|1O|Q|1P|1|1Q]]|A|$]]|$1|T|3|U|5|6|7|1R|8|@$P|1S|Q|1T|V|W]]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|1U|8|@]|9|@]|A|$10|11]]|$1|12|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]|1A|$5|15|16|17|A|$18|1B]]]]

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) 

In this section i will present a code fragment addressing requirement (b) 
Useful references are: 
<a href="https://developer.chrome.com/extensions/debugger" rel="nofollow noreferrer">chrome extensions debugger api</a> 
<a href="https://chromedevtools.github.io/devtools-protocol/tot/Debugger" rel="nofollow noreferrer">chrome devtools protocol debugger domain</a> 
You may want to start reading code from the last function <code>attachToDebugger</code>

<pre class="lang-js prettyprint-override"><code>function captureScreenshot(tabId) {

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

 chrome.debugger.sendCommand(
 {tabId:tabId},
 "Page.captureScreenshot", 
 {format: "png", fromSurface: true},
 response =&gt; {
 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,
 () =&gt; {
 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);
 }
 });
}
</code></pre>

blocks|key|1051655|text|如果您在企业内部，您的IT可能会将策略DisableScreenshots设置为true。您可以通过进入chrome://policy并搜索这个键来检查它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1051656|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

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.

Taking screenshot using javascript for chrome extensions

服务器

HTML5

我已经做了很多关于使用JS拍照的搜索，但似乎没有一个有用。有人说使用activeX控件，这不适合我的情况。我希望用JS拍摄照片并上传到服务器上。

问使用javascript for chrome扩展进行屏幕截图
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript for chrome扩展进行屏幕截图EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript for chrome扩展进行屏幕截图
EN