How do I CAPTURE IMAGE from layout's full size?

Hi All,

On my current code, the only way I can export PNG is by using the browser's Snapshot feature.

The problem is that it's acting like: "What you see on screen, is what you get".

and also: "The current size of the window resolution is what you get".

My project's full layout size is: 3840 x 2160

the layout starts with viewport size of: 1920 x 1080 the user can zoom in/out, exporting takes a snapshot of what's seen on the screen based on the current window size.

if I'm NOT on full screen mode it will capture a smaller resolution based on the size of the window.

The PROBLEM is:

If I want to capture and export (not sure if I should call it snapshot) .PNG of the FULL SIZE of my layout and NOT based on what you see is what you get, even if the window is tiny or full screen to CAPTURE the full size of the layout is what I'm trying to do.

What I want to achieve is:

to CAPTURE the full layout size 3840 x 2160 resolution no matter what the current size of the window, the camera position or zoom is. just to CAPTURE a full layout resolution to .PNG file!

Can somebody PLEASE explain how to do this?

Any screenshots of such code or step-by-step will be very helpful for me to follow as I'm still a noob and I'm guessing that it's not that simple to achieve.

Thanks ahead!

Thanks for sharing dop2000 :)

So there is no similar way to do this on C3 ?

I do have C2 but it means I'll need to build all my project from scratch..

After few more attempt with the Drawing Canvas Object:

So I'm trying to replace the built-in system Snapshot with the Canvas Object save image so I can finally capture the FULL LAYOUT RESOLUTION instead of just the current window display.

I tried to follow the hints on the manual to use "SavedImageURL" but it seems like I cannot use it in the URI to invoke download of the saved PNG the same way it was working on the snapshot version.

On the screenshot I show the line that I try to replace with "SavedImageURL" but.. I'm stuck since it's probably not how it works, I don't understand how do I invoke my saved image from the canvas.

The code I'm trying to "upgrade" from system snapshot to Drawing Canvas Save Image:

This is where I stuck:

Help please?

If you need to load screen snapshot to DrawingCanvas, and then save DrawingCanvas image to disk, I think you need something like this:

Note, that you need another empty sprite (ExportSprite) to load CanvasSnapshot, which you then paste onto the DrawingCanvas. ExportSprite and CanvasSnapshot should be the same size (big enough to fit the screenshot) and placed at the same position.

.

Also note, that DrawingCanvas actions "Save snapshot", "Load snapshot" etc. have nothing to do with the System "Take snapshot" action. They just happen to use the same word "snapshot".

.

If you need to save the entire layout, which is larger than the screen size, you will need to repeat steps in event #2 multiple times. Each time scrolling to a new position, taking new snapshot, loading into ExportSprite and pasting onto the DrawingCanvas. Refer to that demo from R0J0hound I posted earlier.

Now with my example on how to transfer screen snapshots through a sprite into Drawing Canvas, you can try again :)

.

Actually, you can probably make an image of the entire layout much easier. Simply set DrawingCanvas size to layout size and paste all objects on it (Created_Objects family or whatever). Then save and download. You don't need to make screen snapshots.

You probably would want to paste objects one by one ordered by their zIndex.

Now with my example on how to transfer screen snapshots through a sprite into Drawing Canvas, you can try again :)

.

Actually, you can probably make an image of the entire layout much easier. Simply set DrawingCanvas size to layout size and paste all objects on it (Created_Objects family or whatever). Then save and download. You don't need to make screen snapshots.

I will give it a try thanks!

Actually that's what I did exactly, I made the Drawing Canvas Object to cover the full layout which is the exact resolution of 3840 x 2160 hopefully to grab it in one click!

I don't know how to paste the "Created_Objects" Family to the canvas but I want it to capture specific layers like I did before with the system snapshot way (before I used the Drawing Canvas Object).

I hope I'll be able to make it work.

Obviously my code is wrong, but it's a progress, you showed me that "DrawingCanvas.SavedImageURL" which I wondered what to put on the URI section so that's great!

I get a black colored .PNG file after I click the EXPORT button and get some weird resolution, not the full resolution of the layout which is 3840 x 2160 but this weird resolution: 3360 x 1890 ...

I don't know about the weird resolution, but I think that the way I put the Drawing Canvas (resized covering the full layout 3840 x 2160) is on a dedicated layer UNDER the instance layer with the objects I want to include is also a part of the issue beside my code.

I also need the .PNG to be transparent and capture the instances layer above. (that's how the simple snapshot worked and I was happy with).

Maybe it should be ABOVE every other layer I want to include? I don't know how to tell the Drawing Canvas what layers to include or exclude... it's a guess for me.