时间戳

首页 > 解决方案 > 带有 HTML 和 CSS 的屏幕截图库？

javascript - 带有 HTML 和 CSS 的屏幕截图库？

问题描述

我尝试创建一个快速原型，用户可以在其中看到动画过去的样子。为此，我需要一个截图库。到目前为止，我的 HTML 中有：

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

这个函数是基于一些事件调用的：

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

在接下来的步骤中，我需要帮助。每个函数调用如何保存renderer.domElement.toDataURL();为新图像并为其创建元素？如果我应该为每个图像创建一个新的 div 或者将它们全部放在 div“截图”下，我感到很困惑。非常感谢！

标签： javascripthtmlcss

解决方案

我已经设置了一支笔来演示使用按钮创建图像元素。

   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

推荐阅读