Include HTML data in snapshot

[suro7]

Would it be possible to include in snapshot not only the canvas but also other child elements to ?

https://3dfascination.com/3d-fascination-web/viewer/test.php

[elalish]

This would be a bit tricky. Can you tell me what the use case would be?

[suro7]

to include a logo for example

[elalish]

At least within the model-viewer element, it'll still work since the child elements will still be shown over the poster, even if they are not part of the poster. Puppeteer can be used for automated screenshots of any website, so that might help. If you have an idea of how to implement what you're after, a contribution would be most welcome!

[suro7]

can you show me the example where within model-viewer elements can be captured natively?

[elalish]

Child elements of model-viewer are pulled into the default slot in the shadow-root by lit-element. We don't do anything special with them in our own code. I think you're really just looking for a generic way to screenshot a subset of a rendered page.

[suro7]

yes. it seems that it makes a snapshot of the canvas only when I use the code taken from interactive demo page:

let posterUrl = '';
let viewer = document.getElementById('model-viewer');
const a$1 = document.createElement('a');
const orbitString = document.getElementById('cameraOrbit');
async function createPoster(download) {
const orbit = viewer.getCameraOrbit();
orbitString.textContent = ${orbit.theta}rad ${orbit.phi}rad auto;
viewer.fieldOfView = 'auto';
viewer.jumpCameraToGoal();
await new Promise(resolve => requestAnimationFrame(() => resolve()));
URL.revokeObjectURL(posterUrl);
const blob = await viewer.toBlob({ mimeType: 'image/jpg', idealAspect: false });
posterUrl = URL.createObjectURL(blob);
a$1.href = posterUrl;
a$1.download = 'postcard.jpg';
if (download == "download"){
a$1.click();
} else {
displayPoster();
}
}

[elalish]

Yes, exactly, that's why what you're asking for will be tricky.

[suro7]

so what would you recommend to use for screenshot? server is running on PHP and not NodeJS

[elalish]

As I said earlier, if you want a solution external to model-viewer I'd recommend puppeteer. That's what we use for fidelity testing.

[suro7]

Thanks. I will check