Question

我正在使用jsPDF，它使用html2canvas从一些html元素生成图像并插入.pdf文件。但是html2canvas存在问题，它会从html生成模糊的图像。见下面的例子：

HTML内容：

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

html2canvas生成的图片：

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

有没有办法解决它，还是有更好的选择来获取图像形式的HTML？

谢谢！

Answer 1

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

在最新版本v1.0.0-alpha.1中，您可以使用缩放选项来提高分辨率（缩放：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 2

我有这个问题，因为我在视网膜显示器上。我使用MisterLamb's solution here解决了这个问题。

$(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

Answer 3

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

在这里找到解决方案：

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

Answer 4

我遇到了这个问题，我使用domtoimage而不是html2canvas解决了这个问题。

这个HTML2CANVAS解决方案对我来说不是很好，我知道scale选项确实会在捕获目标div之前增大目标div的大小，但是如果您在该div内有某些内容无法调整大小，则该选项将无法工作我的情况是我的编辑工具是画布。

无论如何，我选择了domtoimage，并相信我，我认为这是所有解决方案中最好的。

例如，我不必面对html2canvas的任何问题：

必须位于网页顶部，这样html2canvas才能完整捕获照片并降低dpi问题

function print()
{
    var node = document.getElementById('shirtDiv');
    var options = {
        quality: 0.95
    };

    domtoimage.toJpeg(node, options).then(function (dataUrl)
    {
        var doc = new jsPDF();
        doc.addImage(dataUrl, 'JPEG', -18, 20, 240, 134.12);
        doc.save('Test.pdf');
    });
}

Cdn for dom to image：

https://cdnjs.com/libraries/dom-to-image

CSDN for jspdf：

https://cdnjs.com/libraries/jspdf

Answer 5

这就是为我解决的问题。这不是因为我使用视网膜显示器（因为我没有）：

https://github.com/niklasvh/html2canvas/issues/576

只需使用以下内容更改html2canvas.js中的getBounds（）方法：

 function getBounds (node) {
        if (node.getBoundingClientRect) {
            var clientRect = node.getBoundingClientRect();
            var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
            return {
                top   : Math.floor(clientRect.top),
                bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
                right : Math.floor(clientRect.left + width),
                left  : Math.floor(clientRect.left),
                width : width,
                height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
            };
        }
        return {};
    }

Answer 6

在经过X个小时的测试后，

解决方案非常简单。

将ALL div的值提高2倍，将IMG的值提高2倍，最后将HTML缩放设置为0.5，或者，如果您想要更好的质量，请将其设置为3倍以上（在这种情况下，html缩放必须为0.33）或更高（假定原始图像尺寸较大）。

例如：

HTML

<body>
 <div class="pdf">
   <img src="image.jpg">
 </div>
</body>

CSS之前

body {
    background: #b2b2b2;
}
.pdf {
   background: #fff;
   /* A4 size */
   width: 842px;
   height: 595px;
 }
img {
   width: 300px;
   height: 200px;
}

CSS之后（仅更改）

html {
   zoom: 0.5;
}

.pdf {
   /* A4 size before . 2 */
   width: 1684; 
   height: 1190px; 
 }
img { /* size before . 2 */
   width: 600px;
   height: 400px;
}

这是我的结果：

PDF before PDF after

Answer 7

如果有人仍在寻找适合他们的解决方案，那么我可以通过设置比例尺来获得成功：5.在他们的文档中查看。 https://html2canvas.hertzen.com/configuration

Answer 8

尝试使用Canvas2Image库，它至少为我提供了更高质量的图像 div to image (fiddle)

    html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            Canvas2Image.saveAsPNG(canvas);  // Convert and download as image with a prmompt. 
        }
    });

祝你好运！

HTML2canvas生成模糊图像

8 个答案:

不缩放的HTML和PNG

带缩放的HTML和PNG