在flying-saucer的pdf页面之间打破了嵌入的图像 [英] embaded images are breaked between pdf pages in flaying-saucer

问题描述

我对图像有一些问题（所有图像都嵌入在html中作为base64字符串）。
我用css

I have some problem with images (all images are embedded in html as base64 strings). I use css

img {page-break-inside: avoid;}

它有帮助但并非总是如此。
在某些情况下，可以正确处理相同的图像，而在其他情况下，在页面之间划分。

and it helps but not always. In some cases the same image can be processed correctly where in other situation is divided between pages.

这取决于很多因素，例如：

It depends form many factors, examples:

• 图像被指定为块元素


• 以前的图片是或不是块元素


• 在分割之前有一些大图像

我还注意到，如果问题至少发生一次，那么当文档不适合页面时，文档末尾的所有图像都会被破坏。

I also noticed that if the problem occurred at least once than all images to the end of document can be broken when they don't fit on the page.

我正在使用这种方法将RepleacedElementFactory用于嵌入式图像：
http://www.intelligrape.com/blog/using-data-urls-for-embedding-images-in-flying-saucer -generated-pdfs /

I'm using this approach with RepleacedElementFactory for embedded images: http://www.intelligrape.com/blog/using-data-urls-for-embedding-images-in-flying-saucer-generated-pdfs/

唯一的区别是我正在改变大小

the only difference is that i'm changing the size a bit

public ReplacedElement createReplacedElement(LayoutContext c, BlockBox box, UserAgentCallback uac, int cssWidth, int cssHeight) {
 Element e = box.getElement();
 if (e == null) {
     return null;
 }
 String nodeName = e.getNodeName();
 if (nodeName.equals("img")) {
     String attribute = e.getAttribute("src");
     FSImage fsImage;
     try {
         fsImage = buildImage(attribute, uac, cssWidth, cssHeight);
     } catch (BadElementException e1) {
         fsImage = null;
     } catch (IOException e1) {
         fsImage = null;
     }
     if (fsImage != null) {
         if(cssWidth == -1 && cssHeight == -1)
         {
            int factor = _sharedContext.getDotsPerPixel();
            int width = fsImage.getWidth();
            int fWidth =  width * factor;
            fsImage.scale(fWidth, -1);
         }
         if(cssWidth == -1 || cssHeight == -1)
         {
            fsImage.scale(cssWidth, cssHeight);
         }
         return new ITextImageElement(fsImage);
     }
 }
 return null;

}

区别在于我我添加了这个块：

the difference is I've added this block:

if(cssWidth == -1 && cssHeight == -1)
         {
            int factor = _sharedContext.getDotsPerPixel();
            int width = fsImage.getWidth();
            int fWidth =  width * factor;
            fsImage.scale(fWidth, -1);
         }

如果css没有给出适当的大小。没有它，我遇到的问题是所有图像都很小。

to give proper size if it is not given by css. Without it I had the problem with all images be really tinny.

我想计算图片的实际尺寸（高度）有一些问题，但我真的不喜欢我知道还有什么可以改变，以保证图像永远不会在页面之间断开。

I guess there is some problem with calculating the real size (height) of the picture but I really don't have idea what else can i change to guarantee that images would never break between pages.

请帮忙。

推荐答案

page-break-inside 仅适用于块级元素但 img 是一个内联块元素。尝试使用 img {display：block; page-break-inside：avoid;} 并查看它是否有效。

page-break-inside only applies to block-level elements but img is an inline-block element. Try using img {display: block; page-break-inside: avoid;} and see if it works.

这篇关于在flying-saucer的pdf页面之间打破了嵌入的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！