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

Sri*_*han 62 javascript google-chrome-extension

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

Moh*_*our 82

由于您在Chrome扩展程序中使用此功能,因此Tab API有一个名为captureVisibleTab的方法,该方法允许捕获指定窗口中当前所选选项卡的可见区域.

要使用它,只需在权限清单中添加"tabs"即可.从您的后台页面或弹出窗口(或任何其他扩展页面),您只需调用以下方法:

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

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

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

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

  • 我已经为标签添加了权限,但是当我使用提醒'图像'时,我得到'未定义'.你知道为什么吗? (2认同)
  • Chrome 59现在提供整版截图.您知道是否可以通过Extensions API访问此功能吗?https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots (2认同)

Tod*_*ice 29

我不确定在给出原始答案时是否可以使用此功能,但Google现在有一个示例可用于显示如何截屏:

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

在此页面上搜索"测试截图扩展".

  • 现在链接已损坏 (3认同)

小智 7

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