帶有 HTML 和 CSS 的屏幕截圖庫？

Question

我嘗試創建一個快速原型，用戶可以在其中看到 animation 過去的樣子。 為此，我需要一個截圖庫。 到目前為止，我的 HTML 中有：

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

這個function是根據一些事件調用的：

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);
}

這顯示了當前的屏幕截圖。 太好了，但我想要 10、20、300 或更多。 為了不替換屏幕截圖，但在它旁邊附加了一個新圖像，我希望動畫的時間線以畫廊的形式呈現，也許在 CSS 畫廊https://www.w3schools.com/css/tryit的幫助下.asp?filename=trycss_image_gallery_responsive

在接下來的步驟中，我需要幫助。 每個 function 怎么可能調用 save renderer.domElement.toDataURL(); 作為新圖像並為其創建元素？ 如果我應該為每個圖像創建一個新的 div 或者將它們全部放在 div“截圖”下，我感到很困惑。 非常感謝！

Answer 1

我已經設置了一支筆來演示使用按鈕創建圖像元素。

   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