使用 html2canvas 以固定宽度捕获页面，无论屏幕尺寸如何

Question

我使用 html2canvas 将网页保存为图像，我希望在移动设备和 PC 上获得相同的结果。我的网页有一个表格，在较小的屏幕上呈现不同的效果（通过 CSS）。我希望 html2canvas 保存画布，就好像网页始终在 PC 屏幕上一样。这样，网页上的表格将始终看起来相同。

我目前有一个解决方法，在 html2canvas 运行之前临时将主体宽度和视口初始比例设置为更大，保存网页，然后恢复到之前的主体宽度和视口比例。我使用的代码位于这篇文章的底部。

它基本上可以工作，但用户体验很差，因为在 html2canvas 操作期间，网页会变大，暂停一会儿（在保存期间），然后恢复回来。从用户的角度来看，这看起来不太好。此外，这并不总是适用于所有移动设备。

有更好的方法吗？我是否可以拥有某种屏幕外 html 来镜像我的屏幕上 html，但始终会像在 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');

预先感谢，杰森。

Answer 1

感谢 CBroe，我确实使用屏幕外 iframe 让它工作。如下：

// 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');
     });
});

我确实需要在加载 iframe 并保存图像后删除 iframe，但基本功能似乎可以正常工作，屏幕尺寸不会发生任何奇怪的变化。