使用html2canvas捕获固定宽度的页面，而不管屏幕大小
使用html2canvas捕获固定宽度的页面，而不管屏幕大小
提问于 2022-02-22 09:40:39
我使用html2canvas将网页保存为图像，并希望在移动和PC上获得相同的结果。我的网页有一个表格，在较小的屏幕上呈现不同(通过CSS)。我希望html2canvas保存画布，就像网页总是在电脑屏幕上一样。这样，网页上的表格看起来总是一样的。
我现在有一个解决办法，在html2canvas运行之前，暂时将身体宽度和视口初始比例尺设置为更大的值，保存网页，然后返回到以前的身体宽度和视图范围。我使用的代码位于这篇文章的底部。
它主要工作，但有一个糟糕的用户体验，因为在html2canvas操作期间，网页将变得更大，暂停一点(在保存期间)，然后恢复。从用户的角度来看，这并不是很好。而且，这并不总是适用于每一个移动设备。
有更好的方法吗？我可以有一些屏幕外的html，它反映了我的屏幕上html，但总是呈现好像它在一台电脑上？
// 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');谢谢你，杰森。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-23 09:23:58
多亏了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，但是在屏幕大小上没有任何奇怪的更改，但基本操作似乎是有效的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71218947
复制相关文章
相似问题
腾讯云开发者
