Chr*_*ini 5 screenshot google-chrome zooming google-chrome-extension
我正在尝试获取 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
有效的示例代码
清单.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"}
}
脚本.html
<html>
<head>
<script src="button.js"></script>
</head>
<style>
body{
margin:0px;
width:0px;
height:0px;
border:0px;
}
</style>
<body>
</body>
</html>
按钮.js
function screenshot() {
chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(dataUrl){
window.open(dataUrl);
});
}
screenshot();
| 归档时间： |
|
| 查看次数： |
2055 次 |
| 最近记录： |