Converting HTML to image using java

Question

i'm facing some problem converting html to image using java im using html2image[java]

it create an image, but the problem is it only create an image on a small part of the html. how can i make it to make an image of the whole html. thank you

this is my code

import gui.ava.html.image.generator.HtmlImageGenerator;
import java.io.File;


public class test {
    public static void main(String[] args) {
        HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
        String uri = new File("C:\\cover.html").toURI().toString();
        imageGenerator.loadUrl(uri);
        imageGenerator.saveAsImage("hello-world.png");
        imageGenerator.saveAsHtmlWithMap("hello-world.html", "hello-world.png");
    }
}

i also use saveAsHtmlWithMap to save the html file. and that html file written by the program to the harddisk is also a small one.

this is the html code of cover.thml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="***">
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=1200, height=1200"/>
        <link rel="stylesheet" type="text/css" href="main.css"/>
    </head>
    <body id="cover_page">
        <nav id="cover" >
            <ol>
                <li id="nav1">
                    <a>cover</a>
                </li>
            </ol>
        </nav>
    </body>
</html>

i updated the question. and the generated image is a small part of the html. — audrey ruaburo, Apr 29 '16 at 08:33
Might it have something to do with the viewport you defined in your html? So only a (default?) visible part of the page is rendered as image. — Uwe Allner, Apr 29 '16 at 08:43

flaz14 · Answer 1 · 2016-04-29T15:07:01.510

@Pralay, unfortunately,

imageGenerator.setSize(new Dimension(1024, 768));

and

imageGenerator.getDefaultSize().setSize(1024, 768);

didn't help.

Anyway, default size in ImageRenderer used by html2image is 1024x768. Look at the excerpt from ImageRendereImpl class:

public class ImageRendererImpl implements ImageRenderer {
    public static final int DEFAULT_WIDTH = 1024;
    public static final int DEFAULT_HEIGHT = 768;   
    ...
    private int width = DEFAULT_WIDTH;
    private int height = DEFAULT_HEIGHT;
    private boolean autoHeight = true;
    ...

But pay attention to the autoHeight field. Below inside ImageRendererImpl class you can see:

if (autoHeight) {
    // do layout with temp buffer
    Graphics2D graphics2D = (Graphics2D) bufferedImage.getGraphics();
    renderer.layout(graphics2D, new Dimension(width, height));
    graphics2D.dispose();

    Rectangle size = renderer.getMinimumSize();
    final int autoWidth = (int) size.getWidth();
    final int autoHeight = (int) size.getHeight();
    bufferedImage = new BufferedImage(autoWidth, autoHeight, imageType);
    dimension = new Dimension(autoWidth, autoHeight);

If authHeight is true (actually it's true by default) getMinimumSize() method of org.xhtmlrenderer.simple.Graphics2DRenderer class will be invoked. As can be concluded from the corresponding Javadoc the minimal possible area will be used. This is why you get too little image.

Setting autoHeight to false solves the issue:

public class Test {
    public static void main(String[] args) throws {
        File inputFile = new File("/home/me/Temp/cover.html");
        Html2Image imageGenerator = new Html2Image();
        imageGenerator.getParser().load(inputFile);
        imageGenerator.getImageRenderer().setAutoHeight(false);
        imageGenerator.getImageRenderer().saveImage("/home/me/Temp/hello-world.png");
    }
}

So I've got

PS: I've investigated and overcame the issue with aid of html2image v. 2.0-SNAPSHOT. As for v. 0.9 (which is in Maven Central) you need to modify the source code (v. 0.9 is old and not flexible).

PS2 In pure Java you can try something like this:

public class Example1 {

    private static final int WIDTH = 1204;
    private static final int HEIGHT = 768;

    public static void main(String[] args) throws IOException {
        // open HTML page
        JEditorPane editorPane = new JEditorPane();
        editorPane.setEditable(false);
        URL urlToPage = new File("/home/me/Temp/cover.html").toURI().toURL();
        editorPane.setPage(urlToPage);
        editorPane.setSize(WIDTH, HEIGHT);

        // render the page
        BufferedImage renderedImage = new BufferedImage(640, 480, BufferedImage.TYPE_INT_RGB);
        editorPane.print(renderedImage.getGraphics());

        // write result to file
        ImageIO.write(renderedImage, "PNG", new File("/home/me/Temp/hello-world.png"));
    }
}

PS3 As I see html2image is not maintained now (in order to use to v. 2.0 you need to download and compile it by yourself). Perhaps, there are some living forks of this library. Or just try another HTML rendering library.

I had referred the source code of HtmlImageGenerator and found those setter methods and the default values. Please take a look at: https://github.com/hkirk/java-html2image/blob/master/html2image/src/main/java/gui/ava/html/image/HtmlImageGenerator.java — deadpool, Apr 29 '16 at 15:03
Yes, https://github.com/hkirk/java-html2image/ is a fork of original **html2image**. Seems that is newer that original **html2image** v. 0.9. Just use new version and the issue will go away. — flaz14, Apr 29 '16 at 15:10

score 1 · Answer 2 · answered Apr 29 '16 at 08:47

HtmlImageGenerator by default creates and sets a java.awt.Dimension object of (800,800). You can pass your own new Dimension(x, y) of your custom size using below setter of HtmlImageGenerator class:

 public void setSize(Dimension dimension);

I hope it helps.

score 0 · Answer 3 · answered Apr 29 '16 at 08:40

I am not experienced with html2image, but maybe it can parse the inline CSS only and that's the reason because the resulting image is not the same as is rendered in the browser.

Try adding an inline style with the contens of main.css to your HTML and save an image again.

Converting HTML to image using java

3 Answers3

Linked