Hi, with the help of CoPilot and looking at the Cloud editor documentation, I’ve gotten close to a way of taking a screenshot in Studio but I’ve run into a issue. It seems like when I take the screenshot the UI elements aren’t included in the pic. I’m thinking that there is a issue with access a render pipeline for the UI elements but I’m not sure. The code below is the function that does the work. It happens when a button is pressed on screen.
function takeScreenshot() {
// Find the canvas used for rendering the 3D scene
XR8.addCameraPipelineModule(XR8.canvasScreenshot().cameraPipelineModule())
XR8.canvasScreenshot().takeScreenshot().then(
(data) => {
// myImage is an <img> HTML element
let image = document.getElementById('myImage') as HTMLImageElement
if (!image) {
image = document.createElement('img')
image.id = 'myImage'
image.style.display = 'none'
document.body.appendChild(image)
}
image.src = `data:image/jpeg;base64,${data}`
const link = document.createElement('a')
link.href = `data:image/jpeg;base64,${data}`
link.download = 'screenshot.png'
link.click()
},
(error) => {
console.log(error)
// Handle screenshot error.
}
)
}
Is there something I’m missing or is this process not the best way to do a screenshot of everything on screen? Could I possibly use html2canvas? If so how can I access that library?
Thanks,
Leonard
Did you look at the resulting HTML structure with inspect element? It’s likely that the image is being covered up by the canvas and you need to use CSS to absolute position / z-index it the image preview.
Hey George, I tried this and it didn’t change anything. The UI elements still aren’t showing up.
function takeScreenshot() {
// Find the canvas used for rendering the 3D scene
XR8.addCameraPipelineModule(XR8.canvasScreenshot().cameraPipelineModule())
XR8.canvasScreenshot().takeScreenshot().then(
(data) => {
// myImage is an <img> HTML element
let image = document.getElementById('myImage') as HTMLImageElement
if (!image) {
image = document.createElement('img')
image.id = 'myImage'
image.style.display = 'none'
image.style.position = 'absolute' // Ensure it's positioned absolutely
image.style.zIndex = '100' // Set the z-index value
document.body.appendChild(image)
}
image.src = `data:image/jpeg;base64,${data}`
const link = document.createElement('a')
link.href = `data:image/jpeg;base64,${data}`
link.download = 'screenshot.png'
link.click()
},
(error) => {
console.log(error)
// Handle screenshot error.
}
)
}
I tried setting it to -1 as well and it didn’t change anything at all. I tried inspect and I’m not sure what to be looking for but I did see the image created and it’s Z index state.
Can you land your changes and share your project with the support workspace?
Landed and shared, hope yall can take a look and figure it out 
Updating your screenshot code to the following worked:
function takeScreenshot() {
// Find the canvas used for rendering the 3D scene
const {XR8} = window as any
XR8.addCameraPipelineModule(XR8.canvasScreenshot().cameraPipelineModule())
XR8.canvasScreenshot().takeScreenshot().then(
(data) => {
// myImage is an <img> HTML element
let image = document.getElementById('myImage') as HTMLImageElement
if (!image) {
image = document.createElement('img')
image.id = 'myImage'
// image.style.display = 'none'
image.style.position = 'absolute' // Ensure it's positioned absolutely
image.style.zIndex = '100' // Set the z-index value
image.style.left = '0'
image.style.top = '0'
image.style.width = '50%'
image.style.height = '50%'
}
image.src = `data:image/jpeg;base64,${data}`
document.body.appendChild(image)
const link = document.createElement('a')
link.href = `data:image/jpeg;base64,${data}`
link.download = 'screenshot.png'
link.click()
},
(error) => {
console.log(error)
// Handle screenshot error.
}
)
}
I changed the styling + moved the XR8 definition to be inside the screenshot function so it’s more likely it’ll be on the window by the time the function is called.
Hey George, thanks for looking into this but it seems like the UI at the bottom of the image still isn’t showing up on the screenshot. I want to be able to capture the screen and the UI as well. Thanks.
If you set your UI elements to be 3D then they’ll be included in your screenshot.
