我正在使用 jsPDF，它使用 html2canvas 从一些 html 元素生成图像并插入到 .pdf 文件中。但是 html2canvas 有一个问题，它会从 html 生成模糊的图像。请参见下面的示例：
HTML 内容：
html2canvas 生成的图片：
有什么办法可以修复它，或者有没有更好的选择来获取图像表单 html？
谢谢！
问问题
71092 次
8 回答
30
您可以在 html2canvas中使用缩放选项。
在最新版本 v1.0.0-alpha.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
});
于 2018-06-07T08:21:28.027 回答
12
我遇到了这个问题，因为我在视网膜显示器上。我在这里使用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
于 2016-04-26T07:26:12.570 回答
7
我正面临这个问题，我通过使用domtoimage而不是html2canvas.
这个HTML2CANVAS解决方案对我不起作用我知道缩放选项在捕获它之前确实会增加目标 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');
});
}
dom到图像的cdn：
https://cdnjs.com/libraries/dom-to-image
jspdf的cdn：
于 2020-06-01T04:59:00.757 回答
2
我发现了我的问题。碰巧我的屏幕是Retina Display，所以canvas2html在渲染HTML的时候，由于retina屏幕上像素密度的不同，图像呈现模糊。
在这里找到解决方案：
https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html
于 2014-04-02T17:42:22.417 回答
2
这就是为我解决的问题。这不是因为我使用的是视网膜显示器（因为我没有）：
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 {};
}
于 2016-02-01T16:24:13.320 回答
2
解决方案非常简单，经过 X 小时的测试。
将所有 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;
}
这是我的结果：
于 2020-08-14T13:07:49.377 回答
0
如果有人仍在寻找适合他们的解决方案，我通过设置规模取得了成功： 5. 在他们的文档中查看。https://html2canvas.hertzen.com/configuration
于 2020-10-19T23:01:00.997 回答
-5
试试 Canvas2Image 库，它至少为我提供了更好质量的图像 div to image (fiddle)。
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
Canvas2Image.saveAsPNG(canvas); // Convert and download as image with a prmompt.
}
});
祝你好运！
于 2014-06-04T14:02:24.550 回答