JavaFX - Save As Image

There was a question on forum related to saving of node as image. JavaFX sample - EffectsPlayground had this feature. It uses internal APIs, so its broken in JavaFX 1.2. Community has identified a solution. Thanks to Chris Jensen for pointing me to this.

If you are using internal APIs as mentioned in forum thread, you will have to update your code to use 1.3 internal APIs. Please refer to JavaFX [1.3] - Save As Image post for update related to JavaFX 1.3.

Since it uses internal APIs, it may again break in next release. May be most of users just want to save a set of nodes displayed on screen. In that case we may get the top level container and draw the contents on to an image. Yes, draw back is that it will draw all nodes, so we may have to selectively hide nodes before we save the image.

<script src=""></script> <script src="/rakeshmenonp/resource/SaveAsImage/SaveAsImage.js"></script>

For Applet mode, click on above image

For standalone mode

First we get the instance of top level container which may be an Applet or Frame.

public function getContainer() : Container {

    var container : Container;

    if("{__PROFILE__}" == "browser") { // Applet
        container = FX.getArgument("javafx.applet"as Applet;
    else // Standalone
        var frames = Frame.getFrames();
        // We may improve this logic so as to find the
        // exact Stage (Frame) based on its title
        container = (frames[0as JFrame).getContentPane();

    return container;

Now we can save the contents of the Container as Image

function save(container : Container, bounds : Bounds, file : File) {

    var bufferedImage = new BufferedImage(
        bounds.width, bounds.height, BufferedImage.TYPE_INT_ARGB);
    var graphics = bufferedImage.getGraphics();
    graphics.translate(-bounds.minX, -bounds.minY);

    ImageIO.write(bufferedImage, "png", file);

Yes, it captures the entire scene. So user has to hide the nodes which are not required before saving as image. For this I have created two groups. One group will hold all nodes that needs to be captured. Other group contains nodes which are not required (such as Button). Before taking saving as image, hide the node which contains controls etc, so that they won't appear in saved image.

Try it out and let me know feedback

<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>


I used this your code to alter this Aplication:

Now you can make Sketch and Save in your Computer!!!

Soon I will post in my site the code and explain the details for the implementation. Thanks a lot!!!!

Posted by William Antônio Siqueira on July 21, 2009 at 12:11 PM IST #

@William Antônio Siqueira Thanks! :) Looking forward to see more applications from you..

Posted by Rakesh Menon on July 21, 2009 at 01:44 PM IST #


Posted by Raghu Nair on July 22, 2009 at 03:14 PM IST #

Thank you very much!! You really helped me.

Posted by Oleg O. Plotnikov on December 27, 2009 at 11:47 AM IST #

Hi Rakesh,

Is there a way to save a transparent background image ?
If I only have one RED circle in the screen, the background is saving as WHITE, is there a way to make the empty area as transparent but not WHITE ?


Posted by Kishore on March 24, 2010 at 01:27 PM IST #

@Kishore Its possible with different apis available in BufferedImage and ImageIO, you may try below approach..

Posted by Rakesh Menon on March 26, 2010 at 04:55 AM IST #

I tried passing in a Group that contains a ScatterChart and a Label. The image that is produced appears to be the state of the Group before transforms were applied and the for some reason the chart hasn't been plot yet.

Any thoughts?

Posted by D Harrington on April 11, 2010 at 08:06 PM IST #

@Harrington Above code just draws what ever is shown on screen to BufferedImage, so must work. Will it be possible to submit code snippet. I have another post which saves node and prints image.

Another approach is to use internal APIs. You can refer to solution below from forum..

Posted by Rakesh Menon on April 12, 2010 at 02:53 AM IST #

Thanks for the response.

What I'm trying to do is take the mosaic app (which I think is yours) and use ScatterCharts instead pics. I'm passing a VBox into Utils and getting an undesirable result:

var chart = VBox {
spacing: 10
content: [
Label {
text: strVal
font: Font.font("Ariel", FontWeight.BOLD, 16)
textAlignment: TextAlignment.CENTER
ScatterChart {
title: title
xAxis: NumberAxis {
label: xLabel
labelFont: Font.font("Ariel", FontWeight.BOLD, 16)
yAxis: NumberAxis {
labelFont: Font.font("Ariel", FontWeight.BOLD, 16)
data: ScatterChart.Series {
data: pts

Utils.saveNode(chart, <my_desktop>);

The .png that is saved is not rendered as I'd expect.

I've altered Utils.fx to have an api that returns an Image instead of serializing it to disk (both give the same, unexpected result). The goal was to use this image in the mosaic app in place of the Flickr images.

Posted by D Harrington on April 12, 2010 at 01:17 PM IST #

BufferedImage is in the awt package and can not be used in mobile applications.
Anyone have any solution?

Posted by Leandro de Jesus on April 16, 2010 at 07:36 PM IST #

@Leandro de Jesus Yes this is hack and is not compatible with non-desktop profiles. I haven't looked at mobile implementation yet, have to look into that..

Posted by Rakesh Menon on April 19, 2010 at 02:05 AM IST #

Thank's man you're the boss

Posted by Daniel de Santos on April 22, 2010 at 12:05 PM IST #

Post a Comment:
Comments are closed for this entry.

The views expressed on this blog are my own and do not necessarily reflect that of my organization


« June 2016