Question

我的目标是将文本渲染为图像。我希望布局和大小是静态的，并且字体大小可以调整为要渲染多少文本。我选择的工具是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，但是我也无法在其中使用它。

想法？

Answer 1

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

问题在于300px是一个很小的宽度，默认情况下FlowType定位每行45-75个字符。例如，如果我们假设每行长度为60个字符，则意味着每个字符只有5px宽，因此这就是文本看起来太小的原因。如果将浏览器窗口的大小缩小到300px，您将看到该文本与wkhtmltoimage中显示的文本大小相同。

要增加FlowType的字体大小，请使用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>

使用wkhtmltoimage渲染时，字体大小太小

1 个答案: