2

我的目标是将文本渲染成图像。我希望布局和大小是静态的，字体大小可以根据要呈现的文本量进行调整。我选择的工具是 wkhtmltoimage 0.12.5，想法是这样我可以利用许多 css 样式选项。顺便说一句，我在 Mac 上。

这是我的 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，但我也无法让它在那里工作。

想法？

4

1 回答 1

0

在这种情况下wkhtmltoimage工作正常，您只需要调整其fontRatio设置以使文本更大。或者，您可以增加--width您正在渲染的位置，使其更符合标准浏览器窗口，例如 1200 像素。

问题是 300px 是一个非常小的宽度，默认情况下，FlowType 的目标是每行 45-75 个字符。例如，如果我们假设每行有 60 个字符长，这意味着每个字符只有 5px 宽，这就是文本看起来太小的原因。如果您将浏览器窗口的大小缩小到 300 像素，您将看到文本与它在wkhtmltoimage.

要增加 FlowType 的字体大小基础，请使用这样的fontRatio参数。较小的值产生较大的文本：

$('body').flowtype({
  fontRatio: 15
});

默认fontRatio值为 30，因此请尝试使用较小的值（例如 15）来增加文本大小。

这是一个可运行的示例，它显示了 width 元素的不同 fontRatio 值之间的差异300px。

截屏：

字体大小比较

代码片段：

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

于 2018-10-09T22:50:28.277 回答