html2canvas：图像在 Firefox 上看起来模糊答案

【问题标题】：html2canvas: image look blurred on firefoxhtml2canvas：图像在 Firefox 上看起来模糊
【发布时间】：2015-04-25 02:00:36
【问题描述】：

我正在使用 html2canvas 库从特定 div 生成图像，其中包含用户插入的信息

$('#generate').on('click', function(event){
    event.preventDefault();
    var x=document.getElementById("signature");

        html2canvas(x).then(function(canvas) {
            var data = canvas.toDataURL();
            $('#image').fadeIn(200).attr('src', data);
        });
});

在 Windows Chrome 上，生成的画布看起来不错。但在 Firefox 上，画布内的徽标图像和 html 文本看起来非常模糊。

更新

如果我将 var x 更改为 document.body，画布看起来会更好。但我只需要特定的 div。

【问题讨论】：

我注意到您引用了“签名”，这让我想到，只要它是我们正在谈论的基于 JS 的签名“小程序”，您就可以直接抓取它的画布而不是通过 html2canvas .

标签： javascript canvas html2canvas

【解决方案1】：

当其中一个是异步的时，链式方法可能会很混乱。试试这个：

    html2canvas(x).then(function(canvas) {
        var data = canvas.toDataURL();
        $('#image').attr('src', data);
        $('#image').fadeIn(200);
    });

【讨论】：

没有结果。但是，如果我通过 document.body 更改 var x，画布看起来会更好。问题是我只需要一个 div。

【解决方案2】：

也遇到过这个问题：通过禁用图像平滑解决（另见disabling imageSmoothingEnabled by default on multiple canvases）

【讨论】：

嗨，Kim，第一篇文章很好。但是，我想指出的是，您更有可能收到更详细的答案的赞成票/接受。