如果你的元素完全适合视口，我推荐最近登陆Chrome的区域捕捉API。
有关详细信息，请参阅https://developer.chrome.com/docs/web-platform/region-capture/。

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

// Prompt user to share the tab's content.
const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true });
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget <-- Magic!
await track.cropTo(cropTarget);

const canvas = drawToCanvas(stream);
canvas.toBlob((blob) => {
  // See https://web.dev/patterns/files/save-a-file/ to save this blob locally.
});

/* Utils */

function drawToCanvas(stream) {
  const canvas = document.createElement("canvas");
  const video = document.createElement("video");
  video.srcObject = stream;

  // Play it.
  await video.play();

  // Draw one video frame to canvas.
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext("2d").drawImage(video, 0, 0);

  return canvas;
}

将来，您可能会使用元素捕获Web API。请参阅当前的建议：https://github.com/WICG/proposals/issues/73