使用 html2 canvas 下载 html 元素时如何修复灰度边框

Question

我正在构建一个数独游戏生成器 + 数独下载器。数独本身没有问题，但下载的图像有问题。

所以，我正在使用 html2 canvas，它允许我下载 html 个元素。我用数独做了这个。最大的问题是，当我下载 html 元素时，我在边框周围看到了一些灰度，如您在本例中所见：

并且在网站中您看不到那个灰度边框：

这可能与 css 无关，因为样式本身没有问题，但下载 html 的方式有问题。

我尝试使用不同的图像格式，如 png、jpg 和 heic，结果都是一样的。

如果有人知道可以解决我的问题，请告诉我。

这是我的代码的一个最小示例。在这种情况下，screenshotTarget 只是一个 html 2 元素

document.getElementById("dl-png").onclick = function () {
        const screenshotTarget =       document.getElementById("example-table");
html2canvas(screenshotTarget, {
          scale: 4.5,
        }).then((canvas) => {
          const base64image = canvas.toDataURL("image/jpg");
          var anchor = document.createElement("a");
          anchor.setAttribute("href", base64image);
          anchor.setAttribute("download", "sudoku.jpg");
          anchor.click();
          anchor.remove();
        });
};

Answer 1

您必须先使用 scale 值来增加目标的大小，然后再捕获它。参见 html2canvas configuration。尝试 scale 2 到 5.

如果 html2canvas 无法满足您的需求，您可能需要选择其他工具。尝试 domtoimage. Or the accepted answer 回答同样的问题

（参考这个Whosebug的回答here）

或者你也有类似的情况，这个人在视网膜显示器上。看他的solution.

使用 html2 canvas 下载 html 元素时如何修复灰度边框

How to fix a grayscale border when downloading html elements with html2 canvas

javascript

html

css

html2canvas