Saving Three.js Canvas as image

user_14368217 0
Viewed 263

We have a Carport Designer that uses three.js canvas. I'd like to place a download button to capture the drawing as an image. How would I do that? I've read tons of stuff but nothing I understand.

Thanks in advance!

Edit:

This ended up working for me;

I had to change preserveDrawingBuffer to 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>
three.js render image
1 Answers

You can create an image object via canvas.toDataURL and then download it:

<!-- 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);
}
user_43551140
Related