HTML2Canvas 适用于桌面，但不适用于移动设备。怎么修？答案

【问题标题】：HTML2Canvas works on desktop but not on mobile. How to fix?HTML2Canvas 适用于桌面，但不适用于移动设备。怎么修？
【发布时间】：2020-09-16 23:21:33
【问题描述】：

该网站的目的是下载已签署同意书的图像。一切都在桌面上按我想要的方式运行，但不幸的是它在移动设备上不起作用。我尝试了 chrome、brave、firefox 和 safari。我要么显示图像但不下载，要么出现一些奇怪的页面失真。如何调整代码来修复它？

这是源代码： https://github.com/jacelecomte/wwvhSigns

处理图片保存的方法在这里：

function finalizeScreenshot() {
    html2canvas(document.body).then(function (canvas) {
        document.body.appendChild(canvas);
        saveScreenshot(canvas);
    });
}

function injectScript(uri) {
    const document = window.document;
    const script = document.createElement("script");
    script.setAttribute("src", uri);
    //document.body.appendChild(script);
}

function injectHtml2canvas() {
    injectScript("//html2canvas.hertzen.com/dist/html2canvas.js");
}

 injectScript('./src/html2canvas.js');
    injectHtml2canvas();
    finalizeScreenshot();

function saveScreenshot(canvas) {
    const fileName = "Consent Form";
    const link = document.createElement("a");
    link.download = fileName + ".png";
    //console.log(canvas);
    canvas.toBlob(function (blob) {
        console.log(blob);
        link.href = URL.createObjectURL(blob);
        link.click();
    });
} 

//these 3 functions are run in a row to create and download the screenshot. 
 injectScript('./src/html2canvas.js');
 injectHtml2canvas();
 finalizeScreenshot();

【问题讨论】：

标签： javascript html html2canvas

【解决方案1】：

在调用 html2canvas 之前更改视口，然后再将其更改回来。这个答案来自html2canvas issue fix on github

这应该可以解决它：

1：给你的一个 id，像这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0" id="viewportMeta" />

修改功能

function finalizeScreenshot() {
    var vp = document.getElementById("viewportMeta").getAttribute("content");

    document.getElementById("viewportMeta").setAttribute("content", "width=800");

    html2canvas(document.body).then(function (canvas) {        
        document.body.appendChild(canvas);
        saveScreenshot(canvas);
    }).then(function () {
        document.getElementById("viewportMeta").setAttribute("content", vp);
    }); }

【讨论】：

【解决方案2】：

您还应该能够设置自己的windowWidth 设置，该设置应该会触发相关的媒体查询：

html2canvas( document.body, {
    windowWidth: '1280px'
} ).then( function( canvas ) {
    document.body.appendChild( canvas );
} );

查看可用的html2canvas options。

【讨论】：