我可以“冻结”固定元素以使用 getDisplayMedia 截屏吗？答案

【问题标题】：Can I "freeze" fixed elements to take a screenshot with getDisplayMedia?我可以“冻结”固定元素以使用 getDisplayMedia 截屏吗？
【发布时间】：2022-06-19 22:33:51
【问题描述】：

我正在使用 javascript 实现一个 chrome 扩展来截取整个页面的屏幕截图，到目前为止，我已经设法截取屏幕截图并将其制作成新标签中的画布，它完美地显示了推文的内容，但正如您所见，侧边栏一直重复（忽略红色按钮，这是我的扩展程序的一部分，我知道如何从屏幕截图中删除它）screenshot of a tweet

这是我用来截屏的代码：

async function capture(){
  navigator.mediaDevices.getDisplayMedia({preferCurrentTab:true}).then(mediaStream=>{
    scrollTo(0,0);
    var defaultOverflow = document.body.style.overflow;
    //document.body.style.overflow = 'hidden';
    var totalHeight = document.body.scrollHeight;
    var actualHeight = document.documentElement.clientHeight;
    var leftHeight = totalHeight-actualHeight;
    var scroll = 200;
    var blob = new Blob([document.documentElement.innerHTML],{ type: "text/plain;charset=utf-8" });
    console.log('total Height:'+totalHeight+'client height:'+actualHeight+'Left Height:'+leftHeight);
    var numScreenshots = Math.ceil(leftHeight/scroll);
    var arrayImg = new Array();
    var i = 0;                  
    function myLoop() {         
      setTimeout(function() {   
        var track = mediaStream.getVideoTracks()[0];
        let imgCapture = new ImageCapture(track);
        imgCapture.grabFrame().then(bitmap=>{
          arrayImg[i] = bitmap;
          window.scrollBy(0,scroll);
          console.log(i);
          i++;
        });                  
        if (i <= numScreenshots) {           
          myLoop();              
        }else{
          document.body.style.overflow = defaultOverflow;
          saveAs(blob, "static.txt");
          printBitMaps(arrayImg, numScreenshots, totalHeight);
        }                       
      }, 250)
    }
    myLoop();
  })
}
async function printBitMaps(arrayImg, numScreenshots, totalHeight){
  var win = window.open('about:blank', '_blank');
  win.document.write('<canvas id="myCanvas" width="'+arrayImg[0].width+'px" height="'+totalHeight+'px" style="border:5px solid #000000;"></canvas>');
  var e = numScreenshots+1;
  function printToCanvas(){
    setTimeout(function(){
      var canvas = win.document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.drawImage(arrayImg[e], 0, 200*e);
      e--;
      if(e>=0){
        printToCanvas();
      }
    },10);

  }
  printToCanvas();
}

您知道我可以使用 CSS 或 javascript 以什么方式使侧边栏保持在页面顶部，这样它们就不会随着滚动而一直向下移动吗？

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript google-chrome

【解决方案1】：

这并不是真正的“侧边栏......随着滚动而下降”的情况 - 您使用的代码是拍摄第一个屏幕截图，滚动页面，拍摄另一个屏幕截图，然后将它缝合到最后一个并迭代到页面底部。因此，在您拍摄后续屏幕截图时，您不可避免地会看到屏幕上的内容。

要解决您的问题，在您的第一个屏幕截图后，您需要使用 CSS 将侧边栏的 div 元素设置为 display=None。您可以使用浏览器开发工具找到侧边栏的详细信息，右键单击 Chrome 中的“检查”。

据我所知，Twitter 似乎使用了相当神秘的类名，因此使用其他属性来识别侧栏的 div 可能更简单、更可靠。看来他们在上面设置了data-testid="sidebarColumn"，所以试试看（但 YMMV）。

【讨论】：