[英]Screenshot gallery with HTML and CSS?
I try create a quick prototype where user can see how an animation has looked like in the past.我尝试创建一个快速原型,用户可以在其中看到 animation 过去的样子。 For this I need a screenshot gallery.
为此,我需要一个截图库。 So far I have in my HTML:
到目前为止,我的 HTML 中有:
<div id="screenshot"></div>
This function is called based on some events:这个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);
}
This shows the current screenshot.这显示了当前的屏幕截图。 Great, But I want to have 10, 20, 300 or more of them.
太好了,但我想要 10、20、300 或更多。 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
为了不替换屏幕截图,但在它旁边附加了一个新图像,我希望动画的时间线以画廊的形式呈现,也许在 CSS 画廊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();
每个 function 怎么可能调用 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".
如果我应该为每个图像创建一个新的 div 或者将它们全部放在 div“截图”下,我感到很困惑。 Many thanks!
非常感谢!
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 https://codepen.io/sijbc/pen/MWJeveL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.