Uso html2canvas para guardar una página web como una imagen y me gustaría obtener los mismos resultados en un dispositivo móvil y una PC. Mi página web tiene una tabla que se muestra de manera diferente en una pantalla más pequeña (a través de CSS). Me gustaría que html2canvas guarde el lienzo como si la página web estuviera siempre en la pantalla de una PC. De esta manera, la tabla en la página web siempre se verá igual.
Actualmente tengo una solución alternativa que establece temporalmente el ancho del cuerpo y la escala inicial de la ventana gráfica en algo más grande antes de que se ejecute html2canvas, guarda la página web y luego vuelve al ancho del cuerpo y la escala de la ventana gráfica anteriores. El código que uso está al final de esta publicación.
En su mayoría funciona, pero tiene una mala experiencia de usuario porque durante la operación html2canvas, la página web crecerá, se detendrá un poco (durante el guardado) y luego volverá. Lo cual no se ve muy bien desde el punto de vista de los usuarios. Además, esto no siempre funciona para todos los dispositivos móviles.
¿Hay una mejor manera de hacer esto? ¿Puedo tener algún tipo de html fuera de pantalla que refleje mi html en pantalla pero que siempre se muestre como si estuviera en una PC?
// adjust screen and viewport to allow all table elements to fit on the screen correctly document.body.style.width = '1024px'; let viewport = document.querySelector("meta[name=viewport]"); let remembered_viewport = JSON.stringify(viewport.outerHTML) viewport.setAttribute('content', 'width=device-width, initial-scale=2'); // use html2canvas to save the webpage let tag = document.getElementById("all"); html2canvas(tag).then(function(canvas) { let link = document.createElement("a"); link.download = filename.toLowerCase(); canvas.toBlob( function(blob) { link.href = URL.createObjectURL(blob); link.click(); }, 'image/jpg'); }); // reset screen and viewport document.body.style.width = "auto"; if (remembered_viewport.includes("initial-scale=0.5")) viewport.setAttribute('content', 'width=device-width, initial-scale=0.5'); if (remembered_viewport.includes("initial-scale=2")) viewport.setAttribute('content', 'width=device-width, initial-scale=2'); else viewport.setAttribute('content', 'width=device-width, initial-scale=1');Gracias de antemano, Jasón.
Gracias a CBroe lo hice funcionar usando un iframe fuera de la pantalla. Como sigue:
// capture my on screen html let html = document.documentElement.outerHTML; // create the iframe // there is css to push it off screen (ie. left: -1024px;) let iframe = document.createElement("iframe"); iframe.style.width = "1024px"; iframe.style.height = "100%"; document.body.appendChild(iframe); // add html to iframe iframe.srcdoc = html; // wait for iframe to load iframe.addEventListener("load", () => { // use html2canvas to save the webpage html2canvas(iframe.contentWindow.document.body).then(function(canvas) { let filename = "image.jpg"; let link = document.createElement("a"); link.download = filename.toLowerCase(); canvas.toBlob( function(blob) { link.href = URL.createObjectURL(blob); link.click(); }, 'image/jpg'); }); });Necesito eliminar el iframe después de cargar el iframe Y guardar la imagen, pero los conceptos básicos parecen funcionar sin cambios extraños en el tamaño de la pantalla.