如何解决带有 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“屏幕截图”下。非常感谢!
解决方法
我已经设置了一支笔来演示如何使用按钮创建图像元素。
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/)")})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。