Screenshot gallery with HTML and CSS?

Question

I try create a quick prototype where user can see how an animation has looked like in the past. For this I need a screenshot gallery. So far I have in my HTML:

  <div id="screenshot"></div> 

This function is called based on some events:

function handlePicture() {
  console.log("Greetings from server");
  var img = document.createElement("img");
  img.src = renderer.domElement.toDataURL(); // catching the Three.js scene as image
  var src = document.getElementById("screenshot");
  src.appendChild(img);
}

This shows the current screenshot. Great, But I want to have 10, 20, 300 or more of them. so that the screenshot is not replaced but a new image is appended next to it, I would want the animation's timeline to be presented as a gallery, maybe with the help of CSS galleries https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive

I would need help with the next steps. How could each function call save renderer.domElement.toDataURL(); as a new image and create an element for it? I'm confused if I should make a new div for every image or put them all under div "screenshot". Many thanks!

Answer 1

I have set up a pen to demonstrate creating an image element with a button.

   renderer.domElement.toDataURL() Is an async function so you would need to wrap it in a callback function. 


   var imgBtn = document.getElementById("addImage");
   document.addEventListener("click", function(){
   var newImage = document.createElement("img")
   document.body.appendChild(newImage)
   newImage.setAttribute("src", 
   "https://via.placeholder.com/150/0000FF/808080%20? 
   Text=Digital.com%20C/O%20https://placeholder.com/)")})

https://codepen.io/sijbc/pen/MWJeveL