使用wkhtmltoimage渲染时字体太小
使用wkhtmltoimage渲染时字体太小
提问于 2018-10-10 06:16:27
我的目标是将文本渲染成图像。我希望布局和大小是静态的，字体大小可以调整到要渲染的文本的大小。我选择的工具是wkhtmltoimage 0.12.5，这样我就可以利用许多css样式选项。我使用的是Mac btw。
这是我的Test.html
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="flowtype.js"></script>
</head>
<body>
<div>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div>
<script type="text/javascript">
$('body').flowtype();
</script>
</body>
</html>流程类型：http://simplefocus.com/flowtype/
这在浏览器中有效，但在通过wkhtmltoimage进行渲染时不起作用。
我的命令行调用是
wkhtmltoimage --width 300 --height 100 Test.html Test.png文本看起来小得离谱。窗口大小有问题吗？
我也很乐意使用wkhtmltopdf并渲染成pdf，但我也不能让它在那里工作。
想法？
回答 1
Stack Overflow用户
发布于 2018-10-10 06:50:28
在这种情况下，wkhtmltoimage工作正常，您只需调整其fontRatio设置以使文本更大。或者，你可以增加渲染的--width，使其与标准浏览器窗口更一致，例如1200px。
问题是300px是一个非常小的宽度，默认情况下FlowType的目标是每行45-75个字符。例如，假设每行有60个字符，这意味着每个字符只有5px宽，这就是文本看起来太小的原因。如果您将浏览器窗口缩小到300px，您将看到文本的大小与其在wkhtmltoimage中呈现的大小相同。
要增加font类型的字体大小，请使用fontRatio参数，如下所示。较小的值会产生较大的文本：
$('body').flowtype({
fontRatio: 15
});默认的fontRatio是30，所以可以尝试更小的值，比如15，以增加文本大小。
下面是一个可运行的示例，它显示了宽度为300px的元素的不同fontRatio值之间的差异。
截图：
代码片段：
$('.c1').flowtype(); // Default, fontRatio = 30
$('.c2').flowtype({fontRatio: 15});.c1, .c2 {
width: 300px;
border: solid red 2px;
margin: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fastcdn.org/FlowType.JS/1.1/flowtype.js"></script>
<div class="c1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
<div class="c2">Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52730078
复制相关文章
相似问题
腾讯云开发者
