I am having trouble with combining these to tutorials:
HTML/CSS UI | Learn PlayCanvas and
Capturing a screenshot | Learn PlayCanvas
I have tried here:
https://playcanvas.com/editor/scene/1433985
(logically I have renamed the Screencapture-ui script from ui.js to ui2.js)
It’s not that easy to capture HTML elements on a screenshot.
That example will render from the PlayCanvas canvas element into a screenshot, whereas the HTML elements live outside of it.
Your best bet is to find a JS library that can render HTML to PNG, grab that output before saved to file and then use a secondary canvas to overlay it on top of the regular screenshot canvas.
Or as an alternative use PlayCanvas UI instead of HTML if possible.
Ok, had a hunch about that ‘z-index layer effect’ on before hand, and actually I am left-pushing out the html-divs when doing the screenshot (still only interested in the World-rendered content, but as ‘I/the user’ comes from a state of ‘having a HTML/CSS’ front above, I want to go from a ‘with HTML/CSS’ state to one without - where the 2D Screen button finally takes the screenshot).
But if not possible, I still have a backup plan with a new scene or refresh-to-another URL (not optimal though).
Is all you want to do is grab a screenshot from clicking on a html button? As long as you are okay not having html elements in the screenshot, you just need to fire the correct event on the application object.
The screenshot script is listening for the event ‘ui:takeScreenshot’
Looking at your UI scripts, neither of them are firing that event.
There looks like there are other issues in the project but I’m mobile at the moment so can’t investigate.
Ok, yes I get all that app.fire-procedures 
(for right now without going deeper, on a ‘copy-paste’-level)
But in another setting/another project, I have dug into those issues.
First of all in regards to the “(logically I have renamed the Screencapture-ui script from ui.js to ui2.js)”-part:
var Ui2 = pc.createScript('ui2');
Ui2.attributes.add('screenShotButtonEntity', {type: 'entity'});
// initialize code called once per entity
Ui2.prototype.initialize = function() {
this.screenShotButtonEntity.button.on('click', function () {
this.app.fire('ui2:takeScreenshot');
}, this);
};
This makes a paradox, where this.app.fire('ui2:takeScreenshot'); exempts the structure from really working. As such; if I set ui: to ui2: at screenshot.js nothing happens:
this.app.on('ui2:takeScreenshot', onTakeScreenshot, this);
this.app.on('postrender', this.postRender, this);
// Disable the screenshot camera as we only want it enabled when we take the screenshot itself
this.cameraEntity.enabled = false;
// Ensure it gets rendered first so not to interfere with other cameras
this.cameraEntity.camera.priority = -1;
// Add a <a> to use to download an image file
var linkElement = document.createElement('a');
linkElement.id = 'link';
window.document.body.appendChild(linkElement);
// Clean up resources if script is destroyed
this.on('destroy', function() {
this.app.off('ui2:takeScreenshot', onTakeScreenshot, this);
this.app.off('postrender', this.postRender, this);
PS/NB!: From line 266-328 in screenshot.js → are now commented out temporarely, and those line were working in a parallel creencapture-test project - should not be interfering in any case
There are several issues here:
The ui2.js script is adding an event listener for the click event on a PlayCanvas UI element, not the HTML element button. So right now, the HTML isn’t doing anything new from the original tutorial. You need to fire the event on the HTML button click listener.
The screenshot script in the Editor on the Root entity was referencing the wrong camera for the screenshot. It was referencing the ‘normal’ camera. Part of the initialisation of the screenshot script is to disable the screenshot camera. As it was doing this to the normal camera, it meant that the launch tab wasn’t rendering anything.
Handling both of these issues means you will get this: https://playcanvas.com/project/938482/overview/f-uitilscrcapture
NIce, and a good explanation as well …
{" … Part of the initialisation of the screenshot script is to disable the screenshot camera … ":
I did play with the
this.cameraEntity.camera.priority = -1;-part a little without getting further
}
it now does what we agreed on: Meaning taking a screenshot without the HTML-layer (“Take Screenshot”-button with black backgr)
The priority won’t matter if the cameras are disabled at runtime
PS: I wanted to save the canvas on server (like How to save an HTML 5 Canvas as an image on the server ? - GeeksforGeeks)
Beware that there seem to be a limit of 1024 kb (could not determine if this was on my webhotel [asked them with no clear answer] or in relation to browser limits)
