gpt4 book ai didi

javascript - 将 CaptureVisibleTab 图像保存到临时文件以通过 Node.js 服务器发送

转载 作者:太空宇宙 更新时间:2023-11-04 01:56:30 24 4
gpt4 key购买 nike

我正在尝试使用 Chrome 扩展程序捕获可见选项卡。我已经设法让图像显示在另一个选项卡中以检查其工作情况。但我实际上想要拍摄图像,将其以 PNG 格式保存在用户计算机上的临时文件中。然后最终被发送到服务器,但这是一个不同的问题。如果格式不好,请道歉,我正在学习。

var id = 100;

chrome.browserAction.onClicked.addListener(function() {

chrome.tabs.captureVisibleTab(function(screenshotUrl) {
var viewTabUrl = chrome.extension.getURL('../HTML/InfoPullHTML.html?id=' + id++)
var targetId = null;

chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {

if (tabId != targetId || changedProps.status != "complete")
return;
// alert('test2');

chrome.tabs.onUpdated.removeListener(listener);
// alert('test3');

var views = chrome.extension.getViews();
// alert('test4');
for (var i = 0; i < views.length; i++) {
var view = views[i];
// alert('test' + (i + 5));
if (view.location.href == viewTabUrl) {
view.setScreenshotUrl(screenshotUrl);
break;
}
}
});

// alert('AfterForLoop');

chrome.tabs.create({url: viewTabUrl}, function(tab) {
targetId = tab.id;
});
});
});

图像已拍摄。将图像另存为 PNG 并保存在用户计算机上的临时文件中。

现在我唯一的结果是拍摄图像然后显示在新选项卡中。我是编码初学者,对于如何继续前进我没有丝毫线索。

<!DOCTYPE html>
<html>
<script src="../JavaScript/BrowserInfoJS.js"></script>
<script src="../JavaScript/ScreenshotTargetJS.js"></script>
<head>
<title></title>
</head>
<body>
Image here:
<p>
<img id="target" src="../images/white.png">
<p>
End image
</body>
</html>

这是单击扩展程序后显示图像的页面。

最佳答案

storage APIs您可以使用。要保存文件,请使用 Filesystem .

但是由于您似乎只想保存文件以便稍后上传,因此处理本地存储 API 会更简单:

chrome.tabs.captureVisibleTab({format:"png"}, src=>{
//
chrome.storage.local.get({"captured": []}, s=>{
//
s.captured.push(src);
chrome.storage.local.set({"captured": s.captured});
});
});

如果您要存储大图像或一次存储多个图像,请务必声明 unlimitedStorage 权限。

关于javascript - 将 CaptureVisibleTab 图像保存到临时文件以通过 Node.js 服务器发送,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47751834/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com