Estoy implementando una extensión de Chrome con javascript para tomar una captura de pantalla de una página completa, hasta ahora he logrado tomar la captura de pantalla y convertirla en un lienzo en una nueva pestaña, muestra perfectamente el contenido de un tweet, pero como puedes ver, las barras laterales se repiten todo el tiempo (Ignora el botón rojo, eso es parte de mi extensión y sé cómo eliminarlo de las capturas de pantalla) captura de pantalla de un tweet
Este es el código que estoy usando para tomar la captura de pantalla:
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(); }¿Conoce alguna forma mediante CSS o javascript que pueda usar para hacer que las barras laterales permanezcan en la parte superior de la página para que no sigan bajando con el desplazamiento?
No es realmente un caso de " las barras laterales... bajando con el desplazamiento " - el código que está usando es tomar una primera captura de pantalla, desplazarse por la página, tomar otra captura de pantalla y luego unirla a la última e iterar a la final de la página. Por lo tanto, es inevitable que vea lo que ve en la pantalla en el momento en que toma las siguientes capturas de pantalla.
Para resolver su problema, después de su primera captura de pantalla, deberá configurar el elemento div para que la barra lateral se display=None mediante el uso de CSS. Puede encontrar detalles de la barra lateral usando las herramientas de desarrollo del navegador, haciendo clic derecho y usando "Inspeccionar" en Chrome.
Por lo que puedo ver, Twitter parece usar nombres de clase bastante crípticos, por lo que podría ser más fácil y más sólido identificar el div de la barra lateral con algún otro atributo. Parece que configuraron data-testid="sidebarColumn" en él, así que pruébalo (pero YMMV).