将 Three.js Canvas 保存为图像

Question

我们有一个使用 three.js 画布的 Carport Designer。我想放置一个下载按钮来将绘图捕获为图像。我该怎么做？我读了很多东西，但我什么都不懂。

提前致谢！

编辑：

这最终对我有用；

我必须将 preserveDrawingBuffer 更改为 true。

html

<button id="save">Download Image</button>

<script> document.getElementById('save').onclick=()=>{ saveImage() } function saveImage() { const canvas = document.getElementsByTagName("canvas")[0] const image = canvas.toDataURL("image/png"); const a = document.createElement("a"); a.href = image.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); a.download="image.png" a.click(); } </script>

Answer 1

你可以通过canvas.toDataURL创建一个图片对象然后下载：

<!-- html -->
<canvas id="canvas"></canvas>
<button id="btn-download">Download</button>

// javascript
const downloadButton = document.getElementById('btn-download');
const canvas = document.getElementById('canvas');

downloadButton.addEventListener('click', downloadScreenshot);

function downloadScreenshot() {
  const screenshot = canvas.toDataURL("image/png");
  
  let a = document.createElement('a');
  a.href = screenshot;
  a.download = "screenshot.png";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}