最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【基本解决】Docbook生成的PDF和HTML中图片缩放不统一

Docbook crifan 2286浏览 0评论

【问题】

docbook中,生成的html和pdf中,图片都已经可以实现缩放了。但是同样的xml源码:

            <figure><title>典型的Flash内存单元的物理结构</title>
                <mediaobject>
                    <imageobject>
                        <imagedata fileref="images/flash_cell_structure.jpg" align="center" scalefit="1" width="100%" contentdepth="100%" />
                    </imageobject>
                </mediaobject>
            </figure>

得到的结果,在html和pdf中,显示效果不同,缩放不统一,导致很难看:

html中图片显示太大

pdf中图片显示太小

而本身图片的大小是这个效果的:

本身图片的大小

现在希望是,同样统一的源码,使得在生成HTML和PDF中,显示出来的图片,都是统一的格式,要么都放大,要么都缩小。并且是希望:

在HTML中,图片都是以原始大小去显示

在PDF中,图片小于页面宽度的,则以原始大小显示,大于页面宽度的,则缩至页面宽度以能够显示全部。

【解决过程】

1.之前其实已经折腾过一段时间了,但是还是没有很好的解决此问题。

现在找到了官网关于这部分的解释:Chapter 18. Graphics,这下打算好好的看看,然后看懂了之后,再去折腾试试。

2.后来参考:

Stylesheet’s selection process

去折腾了半天,最后,对于尺寸较小(242×150)的flash_cell_structure.jpg,使用了如下代码:

            <figure><title>典型的Flash内存单元的物理结构</title>
                <mediaobject>
                    <imageobject role="html">
                        <imagedata fileref="images/flash_cell_structure.jpg" align="center" scalefit="0" width="100%" />
                    </imageobject>
                    <imageobject role="fo">
                        <imagedata fileref="images/flash_cell_structure.jpg" align="center" scalefit="0" width="100%"/>
                    </imageobject>
                </mediaobject>
            </figure>

实现了HTML中输出的是正常的尺寸大小:

 

HTML中是原始大小

PDF输出中,貌似正常,但是觉得有点小,不过倒也无大碍:

 

pdf中偏小,但是是实际尺寸

然后对于我此处常见的其他图片大小都是相对较大一些,超过普通pdf中单页的宽度的图片,比如800×526的nand_flash_layout.png,则是采用如下代码:

<figure><title>Nand Flash的结构图</title>
    <mediaobject>
        <imageobject role="html">
            <imagedata fileref="images/nand_flash_layout.png" align="center" scalefit="0" width="100%" />
        </imageobject>
        <imageobject role="fo">
            <imagedata fileref="images/nand_flash_layout.png" align="center" scalefit="1" width="100%"/>
        </imageobject>
    </mediaobject>
</figure>

即,HTML中scalefit="0",而显示原始图片:

HTM中大图片是原始尺寸

而PDF中是采用scalefit="1",缩放到当前页面大小的:

PDF中大图片是缩放到当前页面大小的

这样,就基本达到了我的要求了:

对于个别的小图片,小于当前pdf中单页宽度的,则:

HTML:使用原始大小显示

PDF:使用原始大小显示

而对于多数的超过PDF中单页大小的图片,则:

HTML:使用原始大小显示

PDF:缩放到PDF中单页的大小

 

这样,就不会出现之前的,用scalefit="1" width="100%,导致虽然pdf中显示很正常,但是HTML中每个图片都放大到整个屏幕宽度的,那样恼人的效果了。

【总结】

想要实现以最少改动的代码,而对于HTML中和PDF中的图片显示都比较合适的话,目前找到的最好的办法是:

1. 对于个别的小图片,小于当前pdf中单页宽度的,则使用:

<figure><title>典型的Flash内存单元的物理结构</title>
    <mediaobject>
        <imageobject role="html">
            <imagedata fileref="images/flash_cell_structure.jpg" align="center" scalefit="0" width="100%" />
        </imageobject>
        <imageobject role="fo">
            <imagedata fileref="images/flash_cell_structure.jpg" align="center" scalefit="0" width="100%"/>
        </imageobject>
    </mediaobject>
</figure>

以实现:

HTML:使用原始大小显示

PDF:使用原始大小显示

当前,对于这样个别图片,也可以自己分别对HTML和PDF中去微调,以达到自己所需要的效果。

关于图片缩放的各个参数的解释,可以去参考:Image sizing

 

2. 而对于多数的超过PDF中单页大小的图片,则采用:

<figure><title>Nand Flash的结构图</title>
    <mediaobject>
        <imageobject role="html">
            <imagedata fileref="images/nand_flash_layout.png" align="center" scalefit="0" width="100%" />
        </imageobject>
        <imageobject role="fo">
            <imagedata fileref="images/nand_flash_layout.png" align="center" scalefit="1" width="100%"/>
        </imageobject>
    </mediaobject>
</figure>

以实现:

HTML:使用原始大小显示

PDF:缩放到PDF中单页的大小

转载请注明:在路上 » 【基本解决】Docbook生成的PDF和HTML中图片缩放不统一

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.164 seconds, using 22.08MB memory