问使用getDisplayMedia在元素下面的所有DIVs的Chrome中执行屏幕截图

EN

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;
}