使用 pandoc 为 html/pdf/docx 正确调整 markdown 中的 PNG 图像大小

使用 pandoc 为 html/pdf/docx 正确调整 markdown 中的 PNG 图像大小

我正在尝试使用 markdown 和 pandoc 将单个文档转换为 html、pdf 和 docx。这是一个非常简单的文档,仅包含无数学文本和一些图像。图像为 PNG 格式。我在 markdown 源中包含一张使用此格式的图像:

<div style="float:center" markdown="1">

![my caption](./figures/myimage.png)

</div>

并将其编译为:

# html
pandoc myarticle.md -c mystyle.css -o myarticle.html
# pdf
pandoc myarticle.md -V geometry:margin=1in -o myarticle.pdf
# docx
pandoc myarticle.md -o myarticle.docx

我注意到一些 PNG 图像相同尺寸在 HTML 和 PDF 格式中大小不同。250x256 像素、低分辨率(72 像素/英寸)的 PNG 将在 PDF 中以大致正确的大小显示在页面上,并在 html 中以合理的大小显示,但尺寸相同(250x256 像素)但分辨率较高(300 像素/英寸)的 PNG 在 PDF 输出中会调整为页面上很小。我希望保留一组我指定大小的 PNG 图像,并让它们以该大小显示在 HTML/PDF/DOCX 格式中。

我愿意放弃自动 docx 支持(或之后处理大量手动格式化)只是为了获得 PDF/HTML。

我如何告诉 pandoc 不要调整 PDF 或图像的 PNG 大小,并让它们出现在正确的图像中?谢谢。

答案1

尺寸将转换为像素,以便以类似 HTML 的格式输出。使用该--dpi选项指定每英寸的像素数。默认值为 96dpi。

找到图片中最常见的元素并使用它。仅修改例外。


例如:dpi、宽度、高度。

如果你给它 dpi 信息:

按照说明添加 --dpi 选项来覆盖默认值。


如果您的大多数图片具有共同的高度或宽度,那么应该很容易纠正。

例如,您将该行更改为:

![my caption](./figures/myimage.png){ width=250px }

或者

![my caption](./figures/myimage.png){ height=256px }

或者直接用 HTML 标记来执行此操作:

<img src="./figures/myimage.png" alt="my caption" style="width: 250px;"/>

或者

<img src="./figures/myimage.png" alt="my caption" style="height: 256px;"/>

并且比例是正确的。


参考:Pandoc 自述文件

对于 HTML 和 EPUB,除宽度和高度(但包括 srcset 和 size)之外的所有属性均按原样传递。其他写入器会忽略其输出格式不支持的属性。

图像的宽度和高度属性被特殊处理。当使用时不带单位,单位被假定为像素。但是,可以使用以下任何单位标识符:px、cm、mm、in、inch 和 %。数字和单位之间不能有空格。

尺寸将转换为英寸,以便以 LaTeX 等基于页面的格式输出。尺寸将转换为像素,以便以 HTML 等格式输出。使用该--dpi选项指定每英寸的像素数。默认值为 96dpi。

% 单位通常与某个可用空间相关。例如,上述示例将渲染为:

  1. <img href="file.jpg" style="width: 50%;" />(HTML),
  2. \includegraphics[width=0.5\textwidth]{file.jpg}(LaTeX),或
  3. \externalfigure[file.jpg][width=0.5\textwidth](语境)。

一些输出格式具有类(ConTeXt)或唯一标识符(LaTeX)的概念\caption,或者两者兼有(HTML)。

当未指定宽度或高度属性时,将返回查看图像分辨率和图像文件中嵌入的 dpi 元数据。

注意,数字和单位之间不能有空格,字段和其属性之间也不能有空格,否则这两种方式都不起作用:

![image](/path/to/image){ width = 100% }
![image](/path/to/image){ width=100 px }

如果有空格,标签将被忽略并将作为常规文本发布在您的文档中。

答案2

将样式应用于图像,请尝试此
CSS 样式

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}
img[title="thumbnail"] {
   width:200px;
}
img[alt$="-thumbnail"]{
    width:300px;
}

md 编码风格

![img](link#thumbnail) <!-- src = link#thumbnail -->
![img](link "thumbnail") <!-- title = thumbnail -->
![img -thumbnail](link) <!-- alt = img -thumbnail -->

答案3

使用 markdown 文件,您可以按如下方式设置图像宽度和高度。这可让您为每个图像设置不同的尺寸。

![Title](YOUR_IMAGE_PATH){width=150px height=100px}

相关内容