在识别出感兴趣元素的位置后，裁剪浏览器窗口的相关部分

Question

我有一个网页，在那里我在iframe中嵌入了一个YouTube视频。我需要拍摄YouTube视频的截图。由于跨域限制，使用像html2canvas和dom2image这样的库无法工作。

因此，我想出了一个主意，使用getDisplayMedia((捕获完整浏览器窗口的屏幕截图，然后使用drawImage裁剪相关部分。在我看来，这似乎完全有意义，只需识别iframe的位置，然后使用drawImage对其进行裁剪。然而，它并没有在所有屏幕尺寸中裁剪相关部分。当我改变屏幕分辨率或放大时，它似乎坏了。

另一个想法是编写一个人工智能算法来捕捉这一点。但我认为这太过分了。关于如何使其适用于所有屏幕尺寸和分辨率，有什么想法吗？

<h1>Hello</h1>
<div style="margin: 10;">
<iframe 
id="youtubeiframe" 
width="640" 
height="340" 
src="https://www.youtube.com/embed/vDYP6AKw8bk?controls=0" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>
</div>
<div id="picture" style="margin-top:60; background-color:'gray'"></div> 
<script>
navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true }).then(stream => {
captureStream = stream;
track = captureStream.getVideoTracks()[0];
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const offsets = document.getElementById("youtubeiframe")?.getBoundingClientRect();
const posX = offsets.left;
const posY = offsets.top;
const width = offsets.width;
const height = offsets.height;
canvas.width = width;
canvas.height = height;
let image = new ImageCapture(track);
const bitmap = image.grabFrame().then(bitmap => {
context?.drawImage(bitmap, posX, posY, width, height, 0, 0, width, height);
const pic = document.getElementById("picture");
if(pic.childElementCount > 0)
pic.replaceChild(canvas,pic.children[0]);
else
pic.appendChild(canvas);
});

});

</script>

Answer 1

我介绍了一个中间步骤，将图像缩放到与浏览器窗口相同的大小，然后按预期进行裁剪。这是它的代码-

const tempCanvas = document.createElement("canvas");
tempCanvas.width = window.innerWidth;
tempCanvas.height = window.innerHeight;
const tempContext = tempCanvas.getContext("2d");
tempContext?.drawImage(bitmap,0,0,tempCanvas.width,tempCanvas.height);
context?.drawImage(tempCanvas, posX, posY, width, height, 0, 0, width, height);

以下是包括上述修复程序的完整代码-

<h1>Hello</h1>
<div style="margin: 10;">
<iframe 
id="youtubeiframe" 
width="640" 
height="340" 
src="https://www.youtube.com/embed/vDYP6AKw8bk?controls=0" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>
</div>
<div id="picture" style="margin-top:60; background-color:'gray'"></div> 
<script>
navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true }).then(stream => {
captureStream = stream;
track = captureStream.getVideoTracks()[0];
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const offsets = document.getElementById("youtubeiframe")?.getBoundingClientRect();
const posX = offsets.left;
const posY = offsets.top;
const width = offsets.width;
const height = offsets.height;
canvas.width = width;
canvas.height = height;
let image = new ImageCapture(track);
const bitmap = image.grabFrame().then(bitmap => {
const tempCanvas = document.createElement("canvas");
tempCanvas.width = window.innerWidth;
tempCanvas.height = window.innerHeight;
const tempContext = tempCanvas.getContext("2d");
tempContext?.drawImage(bitmap,0,0,tempCanvas.width,tempCanvas.height);
context?.drawImage(tempCanvas, posX, posY, width, height, 0, 0, width, height);
const pic = document.getElementById("picture");
if(pic.childElementCount > 0)
pic.replaceChild(canvas,pic.children[0]);
else
pic.appendChild(canvas);
});

});

</script>