Javascript 使用HTML2Canvas下载图像

我在下载网站图片时遇到问题。我正在使用html2canvas from:和标准HTML、CSS和javascript添加到网站中。我尝试使用标准HTML代码进行下载( 链接文本）但它似乎对我试图做的事情不起作用。我在这里也尝试过这些建议：在其他一些网站上也尝试过，但是我找不到正确的代码来让它工作。 我可以使用以下代码将网页的图像附加到当前页面的末尾：

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

---

如何编辑上述代码以下载网页而不是附加网页

首先，将html2canvas库注入网页：

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");
}

injectHtml2canvas();

加载脚本后，调用库函数保存屏幕截图：

function saveScreenshot(canvas) {
    const fileName = "image";
    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();
    });
}

html2canvas(document.body, {
    allowTaint: true,
    useCORS: true
}).then(saveScreenshot);

另请参见有关图像的常见问题解答：

为什么不渲染我的图像？

html2canvas无法绕过浏览器设置的内容策略限制。位于当前页面原点之外的绘图图像会污染它们所绘制的画布。如果画布被污染，它将无法再被读取。因此，html2canvas实现了在应用图像之前检查图像是否会污染画布的方法。如果已将AllowPaint选项设置为false，则不会绘制图像

如果希望加载位于页面原点之外的图像，可以使用代理加载图像

---

这很有帮助。我不得不稍微调整几行，让它整体工作。非常感谢。