HTML2canvas生成模糊图像
jga*_*ria 16 html javascript canvas html2canvas jspdf
我正在使用jsPDF,它使用html2canvas从一些html元素生成图像并插入.pdf文件.但是html2canvas存在问题,它会从html生成模糊的图像.见下面的例子:
HTML内容:
html2canvas生成的图片:
有没有办法解决它或有没有更好的选项来获取图像形式的HTML？
谢谢!
Ric*_*rma 19
你可以在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
});
- dpi选项不在最新版本中使用.因此使用比例来获得高质量图像 (4认同)
- 比例工作完美:)另一个解决方法是在调用 html2canvas 之前更改 `window.devicePixelRatio = 2;` (2认同)
Sul*_*har 11
我遇到了这个问题，我通过使用domtoimage而不是解决了它html2canvas。
这个HTML2CANVAS解决方案对我来说效果不佳，我知道缩放选项确实会在捕获目标 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');
});
}
dom 到镜像的 CDN：
https://cdnjs.com/libraries/dom-to-image
jspdf 的 CDN：
https://cdnjs.com/libraries/jspdf
我有这个问题,因为我在视网膜显示器上.我在这里使用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
- 这不是生成的方式应该是..我将 702 大小变成了 800 的宽度，但是当图像生成时，它显示更小并从图像的顶部和右侧切割。 (3认同)
解决方案非常简单，经过X小时的测试。
将所有 div 设置为 2 倍，将 IMG 设置为 2 倍，最后将 html 缩放设置为 0.5，或者如果您想要更好的质量，设置为 3 倍（在这种情况下，html 缩放必须为 0.33）或更高，（原始图像大小）假设更大）。
例如：
超文本标记语言
<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;
}
这是我的结果：
我已经发现我的问题了。碰巧我的屏幕是视网膜显示屏，因此当canvas2html渲染HTML时，由于视网膜屏幕上像素密度的差异，图像呈现模糊。
在这里找到了解决方案：
https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html
- 我也面临这个模糊图像问题，但我没有得到你的答案，你能详细说明一下吗 (16认同)
- 请使解决方案更加明显:) (3认同)