trying to save canvas

[jacob...@gmail.com]

Noob here to html5. I want to add images and text to cesium and save the canvas but I keep getting a blank black screen. Someone mentioned its because cesium uses webgl, is it possible to save the entire screen to my HDD? Pic/text/geometry. I have been using the datatourl method.

[Chris Cooper]

Hi Jacob,

We capture the WebGL canvas on a couple of projects including Doarama.  You need to initialize the WebGL context with preserveDrawingBuffer enabled before capturing.  This can be done in Cesium like this...

  var scene = new Cesium.Scene(canvas, {
    webgl : {
      preserveDrawingBuffer : true
    }
  }, creditContainer);

There may also be a way to do this through the widgets but I haven't looked.  Note that only the WebGL canvas will be captured (i.e. not divs floating on top etc).

Chris

On 30 July 2014 06:03, <jacob...@gmail.com> wrote:

Noob here to html5. I want to add images and text to cesium and save the canvas but I keep getting a blank black screen. Someone mentioned its because cesium uses webgl, is it possible to save the entire screen to my HDD? Pic/text/geometry. I have been using the datatourl method.

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[jacob...@gmail.com]

Thanks I am trying and using that preservedrawingbuffer but the image is still blank. I tried in sandcastle widget and a Dev environment demo I have.

[jacob...@gmail.com]

On Tuesday, July 29, 2014 1:03:18 PM UTC-7, jacob...@gmail.com wrote:
> Noob here to html5. I want to add images and text to cesium and save the canvas but I keep getting a blank black screen. Someone mentioned its because cesium uses webgl, is it possible to save the entire screen to my HDD? Pic/text/geometry. I have been using the datatourl method.

I got some images to show up by placing the code while WebGL renders but it saved an image each frame. Couldn't find out where to place the method when drawing is compleye

[jwrl...@gmail.com]

Hi Gents, I'd like to resurrect this question. What I dont understand is how to actually obtain the image once said and done. My javascript and webgl is is fair lower than beginner for understanding webdev.
To be more specific what actually does this code produce. A href to image url that can be used via REST call to retrieve the image from cesium server?

My short term goal is to use Cesium to generate data(images) based on rendering particular camera view points of a certain area that I can use offline. My long term goal is to have a learning system control the camera view but have processing of the camera view point be done outside of javascript and cesium. So I am looking for a way to send data back and forth between Cesium and another program.

Thanks!!

[Hannah Pinkos]

If you're trying to capture a snapshot of the scene, you can use scene.canvas.toDataURL to generate a data URI image of the canvas.

-Hannah

[jwrl...@gmail.com]

Thanks for the response. I have used this to generate the URI but what I guess I didnt make clear is how to get the image from the URI with out printing it to the console using the URI in my browers. I am looking for way to have the screen shot (when all said and done) be downloaded on my hardrive. The step that I am unclear about for automating from scene.cancas.toDataURL() to hardrive.
Thanks!

[Hannah Pinkos]

This answer on stack overflow might be helpful: http://stackoverflow.com/a/17407392/6261967

This isn't a Cesium specific thing because you can do this with all canvases.  If the link I pasted above doesn't answer your question, you may be able to find what you're looking for by searching on stack overflow for how to save an image from a data URI

-Hannah

[Geoneer]

Hey all,

I did try to implement this also to get an image from the scene.. what I get till now is a big black image from the scene... not the scene how it will look like with a nice 3D view.

I use the suggestion from Hannah also, but no luck till now... 

What to do?

[pink...@gmail.com]

I have the same problem...
any solution yet ?

[jbo023]

Hi, 

we had the same problem some time ago and solved it with the following code snippet: Maybe this will help you.

// configure settings

var targetResolutionScale = 1.0; // for screenshots with higher resolution set to 2.0 or even 3.0

var timeout = 10000; // in ms

  

var scene = viewer.scene;

if (!scene) {

    console.error("No scene");

}

// define callback functions

var prepareScreenshot = function(){

    var canvas = scene.canvas;    

    viewer.resolutionScale = targetResolutionScale;

    scene.preRender.removeEventListener(prepareScreenshot);

    // take snapshot after defined timeout to allow scene update (ie. loading data)

    setTimeout(function(){

        scene.postRender.addEventListener(takeScreenshot);

    }, timeout);

}

var takeScreenshot = function(){    

    scene.postRender.removeEventListener(takeScreenshot);

    var canvas = scene.canvas;

    canvas.toBlob(function(blob){

        var url = URL.createObjectURL(blob);

        downloadURI(url, "snapshot-" + targetResolutionScale.toString() + "x.png");

        // reset resolutionScale

        viewer.resolutionScale = 1.0;

    });

}

scene.preRender.addEventListener(prepareScreenshot);

function downloadURI(uri, name) {

    var link = document.createElement("a");

    link.download = name;

    link.href = uri;

    // mimic click on "download button"

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);

    delete link;

[pink...@gmail.com]

Thank you very much, this worked.
only one thing left, that I wish my legends and extra information to be included in the screenshot.

but for now this is great thank you for sharing it

[Gabby Getz]

Thanks for the answer jbo023!

Unfortunately if you just render the WebGL canvas to an image, you'll only get the 3D content. You can't capture any additional html elements on the page. 

Thanks,

Gabby

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.

[Jerrold Stoy]

Gabby,

Any chance jbo023's solution could be incorportated into Cesium as a new feature.  Seems like this question has been asked in the past and previous solutions did not work on all browsers.

Thanks in advance.

[Gabby Getz]

Hi Jerrold,

That would indeed be an awesome feature. I opened an issue on GitHub, and contributions are always welcome!

Thanks,

Gabby 

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.

[diegov...@gmail.com]

This works for me and also solves CORS issues when trying to use canvas.toDataUrl(). Thanks!