javascript - html2canvas:图像在 Firefox 上看起来模糊

Question

我正在使用 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 上，生成的 Canvas 看起来不错。但在 Firefox 上， Canvas 内的 Logo 图像和 html 文本看起来非常模糊。

更新

如果我通过 document.body 更改 var x， Canvas 看起来会更好。但我只需要特定的 div。

Answer 1

当其中一个方法是异步时，链式方法可能会很困惑。试试这个:

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