# Rendering window contents to image file **URL:** \ **Category:** General JUCE discussion\ **Created:** [May 9, 2014, 11:14pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820 "2014-05-09T23:14:04Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![adamwilson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/adamwilson/32/1387_2.png) [@adamwilson](https://forum.juce.com/u/adamwilson)\ **Post date:** [May 9, 2014, 11:14pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/1 "2014-05-09T23:14:04Z")
Is there a way to render the contents of a window to an image file? I've (accidently) created a really cool animation I would like to render out as seperate frames. I could then put these together to create a movie file or import into some animation software.    Thanks :) ---
**Author:** ![jrlanglois](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jrlanglois/32/21372_2.png) [@jrlanglois](https://forum.juce.com/u/jrlanglois)\ **Post date:** [May 10, 2014, 12:28am UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/2 "2014-05-10T00:28:44Z")
- Create an Image object to draw onto. - Create a Graphics object; parameter is an Image object to "draw" onto. Use step 1's Image! - Manage to get a pointer to the desired top-most level Component. - Call Component::paint() with your Graphics object. - Now, create an instance of desired ImageFileFormat subclass (PNGImageFormat, GIFImageFormat, JPEGImageFormat).   And now I leave the last bit up to you for at least some challenge; link a destination File, your Image object you've painted to and a call to your ImageFileFormat object's writeImageToStream() together. ---
**Author:** ![fireplayer](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@fireplayer](https://forum.juce.com/u/fireplayer)\ **Post date:** [May 10, 2014, 2:06am UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/3 "2014-05-10T02:06:43Z")
I am a big fan of "Time is Money" in the real world so I extracted this from my code. Why spend time figuring out how the hammer is made when you can start nailing right away. Hope this works ``` Image image( Image::ARGB, w, h, true, NativeImageType() ); Graphics g( image );Component \*pComponent = &yourComponent; //Address of your cocomponentpComponent->paint( g ); //If ypou want a area of the component image = image.getClippedImage( rect );File file = fc.getResult().getFullPathName();file = file.withFileExtension( ".png" ); //Or .gif, .jpg,...FileOutputStream stream( file );if ( file.hasFileExtension( ".jpg" ) ) { JPEGImageFormat jPeg; jPeg.writeImageToStream( image, stream ); } else if ( file.hasFileExtension( ".gif" ) ) { GIFImageFormat gif; gif.writeImageToStream( image, stream ); } else if ( file.hasFileExtension( ".png" ) ) { PNGImageFormat png; png.writeImageToStream( image, stream ); } ``` ---
**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\ **Post date:** [May 10, 2014, 9:26am UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/4 "2014-05-10T09:26:08Z")
Hmm. That's not a very good example for the OP to follow. It won't handle all image file extensions, check for failure in opening the stream, choose the correct image size, render any subcomponents, or choose between RGB/ARGB formats depending on whether the component is opaque. What you want is something like this: ``` static bool writeComponentImageToFile (const File& file, Component& comp, Rectangle\ subArea) { if (ImageFileFormat\* format = ImageFileFormat::findImageFormatForFileExtension (file)) { FileOutputStream out (file); if (out.openedOk()) return format->writeImageToStream (comp.createComponentSnapshot (subArea), out); } return false; } ``` I've not tried compiling this, but you get the gist.. ---
**Author:** ![adamwilson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/adamwilson/32/1387_2.png) [@adamwilson](https://forum.juce.com/u/adamwilson)\ **Post date:** [May 10, 2014, 11:21am UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/5 "2014-05-10T11:21:37Z")
Thanks guys much appreciated will have a play with this over next few days. ---
**Author:** ![heder](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@heder](https://forum.juce.com/u/heder)\ **Post date:** [December 24, 2017, 12:27pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/6 "2017-12-24T12:27:42Z")
Hi I have almost the same issue here. I’m looking for a way to create a small thumbnail of the screen content of a window when it is not visible. The thumbnail should then be saved as small bmp files. Is that possible also? FYI I’m a newbie to JUCE 😇 -Cheers ---
**Author:** ![daniel](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/daniel/32/790_2.png) [@daniel](https://forum.juce.com/u/daniel)\ **Post date:** [December 24, 2017, 1:51pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/7 "2017-12-24T13:51:21Z")
There are a lot of approaches in the thread, please let us know, which you tried and where you are stuck, otherwise we just repeat what is already said. One thing I found to add, there is a helper method [Component::createComponentSnapshot()](https://juce.com/doc/classComponent#a275e46e5a8147f89c142c91ba5c793a5) which will create the Image for you. I don’t think it needs to be visible to do that, but you need to give it a size (call setSize() if it is a top level component or it may be set by it’s parent’s resized() method. ```auto // ScopedPointer comp = new MyComponent(); // given component is a valid Component* // comp->setSize (600, 400); // only needed if comp has no size set File thumbFile = File::getSpecialLocation (File::userDesktopDirectory).getChildFile ("snapshot.png"); Image snapShot = comp->createComponentSnapshot (comp->getLocalBounds()); Image thumbnail = snapShot.rescaled (100, 100 * comp->getHeight() / copm->getWidth()); // copied from jules' posting above: if (ImageFileFormat* format = ImageFileFormat::findImageFormatForFileExtension (thumbFile)) { FileOutputStream out (thumbFile); if (out.openedOk()) format->writeImageToStream (thumbnail, thumbFile); } ``` ---
**Author:** ![heder](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@heder](https://forum.juce.com/u/heder)\ **Post date:** [December 26, 2017, 1:59pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/8 "2017-12-26T13:59:17Z")
Hi Daniel. Thanks a lot for your help!! -The code seems to work just fine 🙂 But I’m still struggling to make it work in the case when a window contains a VST GUI object of the type ‘AudioProcessorEditor’. When I do the same with such a window, the result is a well sized png file but its empty though. I’m just using the JUCE example ‘Audio Plugin Host’, and the idea was just to let the application create a set of small thumbs of all found VST instruments 🙂 -Merry Christmas ---
**Author:** ![daniel](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/daniel/32/790_2.png) [@daniel](https://forum.juce.com/u/daniel)\ **Post date:** [January 2, 2018, 12:09pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/9 "2018-01-02T12:09:54Z")
> [@heder](#): > > the idea was just to let the application create a set of small thumbs of all found VST instruments That’s a great idea, that would be very useful. The problem with the vst-gui might be, that in this case it doesn’t use the JUCE graphics context to render, but I think it uses the window handle from the OS. I had no time to dig into the hosting example, maybe somebody else can chime in, how this can be done… Good luck! ---
**Author:** ![dave96](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/dave96/32/8487_2.png) [@dave96](https://forum.juce.com/u/dave96)\ **Post date:** [January 2, 2018, 12:19pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/10 "2018-01-02T12:19:43Z")
There’s a hidden JUCE function to create an Image from a native window handle. You’ll have to declare it like so in your own code: ``` namespace juce { Image createSnapshotOfNativeWindow (void* nativeWindowHandle); } ``` then call it with `ComponentPeer::getNativeHandle()` Depending on the plugin format and window decorations you may have to remove trim these if required. ---
**Author:** ![adamwilson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/adamwilson/32/1387_2.png) [@adamwilson](https://forum.juce.com/u/adamwilson)\ **Post date:** [January 3, 2018, 10:13am UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/11 "2018-01-03T10:13:16Z")
Following on from my initial question, I’m currently trying to work out a neat way of rendering a component to an image at a specific size, without making an off-screen copy of it (it only seemed to render the background that way). Basically I want to render an image of part of the screen at a consistent size, rather than its visible dimensions (which are dependant on the device screen size and orientation). ---
**Author:** ![heder](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@heder](https://forum.juce.com/u/heder)\ **Post date:** [January 22, 2018, 10:54pm UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/12 "2018-01-22T22:54:31Z")
> [@dave96](#): > > ComponentPeer::getNativeHandle() Hi Dave, -your made my day 🙂 it works!! Thanks a 1000 times! Cheers. ---
**Author:** ![SaroMigyan](https://avatars.discourse-cdn.com/v4/letter/s/ecae2f/32.png) [@SaroMigyan](https://forum.juce.com/u/SaroMigyan)\ **Post date:** [March 27, 2020, 3:34am UTC](https://forum.juce.com/t/rendering-window-contents-to-image-file/12820/13 "2020-03-27T03:34:46Z")
So, is it possible to capture an animation in my JUCE window into an mp4 (or other video file)? I see in this thread that it’s possible to capture frames as images, but I would like the output from my JUCE plugin to be an mp4. Or to go to Syphon. Is this possible? Or at least, is there any built-in way to do this?