1

How can I convert a HTML code into a PNG image which is transparent?

String s = "<font size="6">Schriftgröße 6</font>"

Convert into transparent image? How can I do this?

HaveNoDisplayName
  • 8,291
  • 106
  • 37
  • 47
internet
  • 385
  • 1
  • 8
  • 27
  • What exactly do you mean by convert HTML code to a transparent PNG image? Have an image of the code? – Steve Nov 11 '15 at 06:31
  • Yes, I would like to convert the String (my HTML code) to an image file. So it´s moreless the image of the code. – internet Nov 11 '15 at 06:32
  • You can start with something like [this](http://stackoverflow.com/questions/18800717/convert-text-content-to-image/18800845#18800845) – MadProgrammer Nov 11 '15 at 06:32
  • Ok, but than I will get the real code from HTML? I would like the code in HTML translation, but I guess I will get in this code only Schriftgröße 6 – internet Nov 11 '15 at 06:35
  • It´s something like this Lib: https://code.google.com/p/java-html2image/downloads/detail?name=html2image-0.9.jar&can=2&q= But I cannot convert it to transparent image in this lib? – internet Nov 11 '15 at 06:36
  • @internet The problem with you linked example is it's using a `JEditorPane` as the primary rendering surface, nice idea. I'm not sure if it would be possible to make a `JEditorPane` which was transparent – MadProgrammer Nov 11 '15 at 06:44
  • @internet You might also consider having a look at [this](http://stackoverflow.com/questions/7796558/javafx-2-0-webview-webengine-render-web-page-to-an-image) example, which makes use of JavaFX's `WebView` which has a much greater support for HTML and CSS then Swing ... But I doubt you'd get it transparent though :P – MadProgrammer Nov 11 '15 at 06:54
  • I only need html, no CSS code... – internet Nov 11 '15 at 07:17

1 Answers1

1

The core problem is, the means by which a html text is renderer is buried WAY deep down in the core API. Been to lazy to go around trying to dig it out, I'd cheat and simply use a JLabel, for example...

Example

JLabel label = new JLabel("<html><font size=\"6\">Schriftgröße 6</font></html>");
label.setSize(label.getPreferredSize());

BufferedImage img = new BufferedImage(label.getPreferredSize().width, label.getPreferredSize().height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = img.createGraphics();
g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);
label.printAll(g2d);
g2d.dispose();
try {
    ImageIO.write(img, "png", new File("Text.png"));
} catch (IOException ex) {
    ex.printStackTrace();
}

If you'd like to use the html2image API, you'll need to change the way in which the rendering surface it uses is generated.

The API basically uses a JEditorPane, which is actually a nice trick, the problem is, you need to make it transparent, maybe something like...

HtmlImageGenerator imageGenerator = new HtmlImageGenerator() {
    protected JEditorPane createJEditorPane() {
        JEditorPane editor = super.createJEditorPane();
        editor.setOpaque(false);
        return editor;
    }

};
imageGenerator.loadHtml("<font size=\"6\">Schriftgröße 6</font>");
imageGenerator.saveAsImage("hello-world.png");

Which outputs...

hello-world.png

MadProgrammer
  • 343,457
  • 22
  • 230
  • 366