HTML2canvas生成模糊图像

Question

我使用jsPDF，它使用html2canvas从某个html元素生成一个图像并插入到.pdf文件中。但是html2canvas上有一个问题，它从html生成模糊的图像。见下面的例子：

HTML内容：

http://puu.sh/7SZz4.png

html2canvas生成的图像：

http://puu.sh/7SZAT.png

是否有任何方法来修复它，或者是否有更好的选择来获得图像格式html？

谢谢!

Answer 1

我发现了我的问题。我的屏幕是Retina显示器，所以当canvas2html渲染时，由于视网膜屏幕上像素密度的不同，图像会呈现模糊。

在这里找到了解决方案：

https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html

Answer 2

您可以在比例选项中使用html2canvas。

在最新的版本v1.0.0-alpha.1 1中，您可以使用scale选项来提高分辨率(scale: 2将使分辨率从默认的96dpi翻一番)。

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});

Answer 3

我有这个问题是因为我在视网膜显示器上。我用MisterLamb的解决方案解决了问题。

$(window).load(function () {

    var scaleBy = 5;
    var w = 1000;
    var h = 1000;
    var div = document.querySelector('#screen');
    var canvas = document.createElement('canvas');
    canvas.width = w * scaleBy;
    canvas.height = h * scaleBy;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    var context = canvas.getContext('2d');
    context.scale(scaleBy, scaleBy);

    html2canvas(div, {
        canvas:canvas,
        onrendered: function (canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            Canvas2Image.saveAsPNG(canvas);
            $(body).append(canvas);
        }
    });
});

没有缩放的HTML和PNG

​

​

带有缩放的HTML和PNG

​

​