spritefire Posted April 20, 2015 Share Posted April 20, 2015 I noticed that there is a function to create a screenshot (https://github.com/BabylonJS/Babylon.js/wiki/Render-scene-on-a-PNG-(Screenshot)), however couldn't find any information about being able to create a screenshot of the canvas and then it being saved on the server.Is it possible to do this? and if so how would I specify the location? Quote Link to comment Share on other sites More sharing options...
RaananW Posted April 20, 2015 Share Posted April 20, 2015 Babylon has no connection to the server. You will have to render the png, and upload the file using XMLHttpRequest, and as you have the PNG as string, it is a simple POST request (and not a file upload).I did that in the material editor - https://github.com/RaananW/BabylonJS-Material-Editor/blob/196a2a4f7af523151bcf4e1a721fe88dbfcd0b46/MaterialEditor/material/MaterialController.ts#L177 (using angular in that case). Should work the same using any other framework. spritefire 1 Quote Link to comment Share on other sites More sharing options...
spritefire Posted April 20, 2015 Author Share Posted April 20, 2015 I must be doing something wrong or missing something. When I render the PNG usingvar screenshot = new BABYLON.Tools.CreateScreenshot(engine, myCamera, 400);console.log(screenshot);It automatically starts the download (don't want it to download on the client end, just want it to take a snapshot and send to server) and the console returns: d.CreateScreenshot {}and not the PNG as a string. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted April 20, 2015 Share Posted April 20, 2015 Hi SF, good to see you again. You've read this? http://babylondoc.azurewebsites.net/page.php?p=22691 The result will be automatically downloaded if your browser supports it, otherwise it will be displayed on a new tab, it will be in any cases a PNG picture. Now let's wander to ... https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Tools/babylon.tools.js#L406 There's your function. yay! But we only care about line 447 - Tools.DumpFramebuffer(width, height, engine); So now let's go to line 356... and there's our dumper. yay! But we only care about line 387. (and maybe 385). Line 387 checks to see if your browser is modern enough to do auto-download. If lines 385 - 404 were removed, and replaced with...385 return imageData.data;...that would make spritefire a happy person. Just force it, SF. Put this code... somewhere "early" in your scene (before calling createScreenShot): BABYLON.Tools.DumpFramebuffer = function (width, height, engine) { console.log("MY version of DumpFramebuffer - Activated!"); // Read the contents of the framebuffer var numberOfChannelsByLine = width * 4; var halfHeight = height / 2; //Reading datas from WebGL var data = engine.readPixels(0, 0, width, height); for (var i = 0; i < halfHeight; i++) { for (var j = 0; j < numberOfChannelsByLine; j++) { var currentCell = j + i * numberOfChannelsByLine; var targetLine = height - i - 1; var targetCell = j + targetLine * numberOfChannelsByLine; var temp = data[currentCell]; data[currentCell] = data[targetCell]; data[targetCell] = temp; } } // Create a 2D canvas to store the result if (!screenshotCanvas) { screenshotCanvas = document.createElement('canvas'); } screenshotCanvas.width = width; screenshotCanvas.height = height; var context = screenshotCanvas.getContext('2d'); // Copy the pixels to a 2D canvas var imageData = context.createImageData(width, height); //cast is due to ts error in lib.d.ts, see here - https://github.com/Microsoft/TypeScript/issues/949 var castData = imageData.data; castData.set(data); context.putImageData(imageData, 0, 0); return imageData.data; };Override! yay! This should work fine. I call it "hijacking" a framework function (customizing)... and it feels really good when it works. Watch your console messages to make sure the framework is calling YOUR special version. There might be better ways to do this, but, this might work. Hopefully, others will comment. Be well! spritefire 1 Quote Link to comment Share on other sites More sharing options...
spritefire Posted April 21, 2015 Author Share Posted April 21, 2015 Thanks!! (been away a bit doing studies but should be back here a bit more now that an assignment is out of the way) Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.