gpt4 book ai didi

google-chrome - 在 chrome 扩展中捕获元素图像(缩放失败)

转载 作者:行者123 更新时间:2023-12-03 21:58:08 27 4
gpt4 key购买 nike

我正在尝试获取 chrome 扩展中特定元素的图像/屏幕截图,我遇到的问题是当我从 chrome.tabs.captureVisibleTab 裁剪结果时如果页面被放大/缩小(通过 View -> Zoom In),结果图像将关闭。

特别的问题是,因为页面被缩放,所以我从内容脚本中得到的偏移/大小没有被放大/缩小,所以我最终裁剪了屏幕截图的错误区域

有没有办法获取/设置标签当前的缩放级别?或者检测正确的元素大小/位置?

我在谷歌上找到的所有内容都指向否,但是很棒的屏幕截图使这项工作以某种方式起作用

背景.js:

chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" }, function(dataUrl) {
console.log('got capture');
if (!canvas) {
canvas = document.createElement("canvas");
document.body.appendChild(canvas);
console.log('created canvas');
}
var image = new Image();
image.onload = function() {
console.log('image loaded, cropping');
canvas.width = dimensions.width;
canvas.height = dimensions.height;
var context = canvas.getContext("2d");
context.drawImage(image,
dimensions.left, dimensions.top,
dimensions.width, dimensions.height,
0, 0,
dimensions.width, dimensions.height
);
console.log('image created');
var croppedDataUrl = canvas.toDataURL("image/png");
chrome.tabs.create({
url: croppedDataUrl,
windowId: tab.windowId
});
}
image.src = dataUrl;
});

内容脚本:
console.log('getting dimensions')
var dimensions = {
top: -window.scrollY + $(element).offset().top,
left: -window.scrollX + $(element).offset().left,
width: $(element).width(),
height: $(element).height()
};
console.log('sending dimensions', dimensions);
sendResponse(dimensions);

最佳答案

我在这里尝试了一个示例扩展,它也与放大和缩小完美配合。它总是 captured visible Tab完美。如果您正在考虑调整缩放级别,您可以尝试 document.body.style.zoom = "Your_value%";但是你需要把这个代码通过 content script让它运行 chrome extensions
有效的示例代码

manifest.json

{
"name": "Screen Shot",
"version": "1.0",
"manifest_version": 2,
"description": "This will generate Screen Shot of current Chrome Page",
"browser_action": {
"default_icon": "screen.png",
"default_popup": "script.html"
},
"permissions": [
"tabs","<all_urls>"
],
"icons":{"16":"screen.png","48":"screen.png","128":"screen.png"}
}

script.html
<html>
<head>
<script src="button.js"></script>
</head>
<style>
body{
margin:0px;
width:0px;
height:0px;
border:0px;
}
</style>
<body>
</body>
</html>

button.js
function screenshot() {
chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(dataUrl){
window.open(dataUrl);
});
}
screenshot();

关于google-chrome - 在 chrome 扩展中捕获元素图像(缩放失败),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13548510/

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