英文:
Take a screenshot of modelviewer .glb file
问题
我正在尝试截取 model-viewer 显示的 .glb 文件的屏幕截图，但我找不到解决方案。
我在某处读到的关键是将 model-viewer 转换为 Blob 对象，然后下载图像。
<div class="button">
<a id="download" href="#">下载按钮</a>
</div>
<script>
function download() {
const modelViewer = document.querySelector("#modelviewertest");
const screenshot = URL.createObjectURL(
modelViewer.toBlob("image/jpeg")
);
const downloadLink = document.querySelector("#download");
downloadLink.download = screenshot;
downloadLink.href = screenshot;
}
</script>
我尝试使用 html2canvas 来截取屏幕截图，但不起作用。我想将加载在 model-viewer 上的 .glb 模型的屏幕截图保存到我的服务器上。
英文:
I'm trying to take a screenshot of a .glb file displayed by model-viewer. But I can't arrive to a solution.
I've read somewhere that the key is to convert the modelviewer to a blob object and then download an image.
<div class="button">
<a id="download" href="#">Download button</a>
</div>
<script>
function download() {
const modelViewer = document.querySelector("#modelviewertest");
const screenshot = URL.createObjectURL(
modelViewer.toBlob("image/jpeg")
);
const donwloadLink = document.querySelector("#download");
donwloadLink.download = screenshot;
donwloadLink.href = data;
}
I have tried to take a screenshot with html2canvas but not working. I would like to save into my server a screenshot of the glb model loaded on model-viewer.
答案1
得分: 2
以下是您要的内容的中文翻译：
这里有一个关于如何截图并下载的示例链接。如果链接无效，下面是代码。感谢GitHub用户 @milesgreen 的贡献，他通过这个问题发布了这个方法。
const modelViewer = document.getElementById("viewer");
async function downloadPosterToBlob() {
const blob = await modelViewer.toBlob({ idealAspect: false });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "modelViewer_toBlob.png";
a.click();
URL.revokeObjectURL(url);
}
function downloadPosterToDataURL() {
const url = modelViewer.toDataURL();
const a = document.createElement("a");
a.href = url;
a.download = "modelViewer_toDataURL.png";
a.click();
URL.revokeObjectURL(url);
}
上面的JavaScript代码引用了一个具有ID设置为 "viewer" 的HTML元素。
<model-viewer id="viewer"
alt="两缸发动机"
src="models/2CylinderEngine.glb"
shadow-intensity="1"
camera-controls touch-action="pan-y">
</model-viewer>
在HTML中添加一个按钮，并将其与上面的下载函数连接到其“click”事件：
document.querySelector("#download-button").addEventListener("click", downloadPosterToBlob);
<button id="download-button">下载</button>
参考链接：model-viewer web组件的 toBlob() 方法。
英文:
There's a sample of taking a screenshot and downloading it here. The code is listed here in case the link goes down. Attribution goes to @milesgreen on GitHub, posted through this issue.
const modelViewer = document.getElementById("viewer");
async function downloadPosterToBlob() {
const blob = await modelViewer.toBlob({ idealAspect: false });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "modelViewer_toBlob.png";
a.click();
URL.revokeObjectURL(url);
}
function downloadPosterToDataURL() {
const url = modelViewer.toDataURL();
const a = document.createElement("a");
a.href = url;
a.download = "modelViewer_toDataURL.png";
a.click();
URL.revokeObjectURL(url);
}
The JavaScript above references an HTML element that has an ID set to "viewer".
<model-viewer id="viewer"
alt="Two cylinder engine"
src="models/2CylinderEngine.glb"
shadow-intensity="1"
camera-controls touch-action="pan-y">
</model-viewer>
Add a button in HTML and connect to its click event to trigger the download function above:
document.querySelector("#download-button").addEventListener("click", downloadPosterToBlob);
<button id="download-button">Download</button>
Reference to the model-viewer web component's toBlob() method.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论