3 screenshots to HTML

Help & Support
#1

Hello, I need your help, I am following the example of 3 screenshots and trying to include them in an HTML (also a tutorial). My problem is that I manage to include only one capture (the last of the 3). Could someone modify the code so that it includes the 3 screenshots in the HTML.

Here’s a screenshot to help understand

Screen 2022-03-14 090449
Screen 2022-03-14 0904491920×1080 84.2 KB

Here I leave the access to my project
Question about 3 Screenshots | Editor (playcanvas.com)

One more question
Is there a way to pass a value to a querySelector from a script attribute?
I have tried this but it doesn’t work:

CameraToTexture.attributes.add(‘my_selector’, {type: ‘string’});

var imgElement_1 = document.querySelector(this.my_selector);

Thank you very much for your help

#2

All the screenshots are applied to the same image HTML element here:

    // Thanks https://stackoverflow.com/a/44487883
    var link = document.getElementById('link');
    link.setAttribute('download', filename+'.png');
    link.setAttribute('href', this.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
    //link.click();

    var imgElement = document.querySelector('.imgNrm_1');
    imgElement.src = link;
};

So I’m not sure what you are expecting here given that the image element is going to always show the last screenshot.

It sounds like you want to add multiple image HTML elements or have multiple image HTML elements to refer to.

Should be fine, I can’t see any issue here unless there’s a scope issue. When you do the query, what is the this object referring to?

#3

Thanks for answering

I have added two more image elements to my code, but I don’t know how to do for screenshot 1, go to element (.imgNrm_1), screenshot 2 to (.imgNrm_2) and screenshot 3 to (.imgNrm_3) .

// Thanks https://stackoverflow.com/a/44487883
    var link = document.getElementById('link');
    link.setAttribute('download', filename+'.png');
    link.setAttribute('href', this.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
    //link.click();



    var imgElement_1 = document.querySelector('.imgNrm_1');
    imgElement_1.src = link;

    var imgElement_2 = document.querySelector('.imgNrm_2');
    imgElement_2.src = link;

    var imgElement_3 = document.querySelector('.imgNrm_3');
    imgElement_3.src = link;
#4

Quickly made an example fork: https://playcanvas.com/project/897127/overview/f-3-screenshots

What I did was pass the index of the camera to the takeScreenshot function and used the index to generate the filename of the png and also the querySelector string

#5

I really appreciate your help very much and appreciate your great knowledge. Thanks for your time. this is just what i needed. :star_struck: