angular-threejs / angular-three

Angular Renderer for THREE.js
MIT License
184 stars 23 forks source link

please ask your question related to capturing. #12

Closed ldu0009 closed 1 year ago

ldu0009 commented 1 year ago

I'm trying to capture a canvas that has been rendered using angular-three, but I can't seem to capture it. The html2canvas library doesn't work, and using canvas.toDataURL() also doesn't work. How can I capture the canvas?

nartc commented 1 year ago

Have you tried:

<ngt-canvas [gl]="{ preserveDrawingBuffer: true }" />
ldu0009 commented 1 year ago

@nartc Oh! I didn't know there was such a clever way to do it! Thank you so much. I had been resolving the issue by forcibly running renderer.render(scene,camera) before executing getContext, but I will change it to this code.

 this.renderer.render(this.scene, this.camera)
 const canvas = this.canvas.rendererCanvas.nativeElement
 const ctx = canvas.getContext('2d');
 const base64 = this.renderer.domElement.toDataURL('image/png');
 const blob = await this.base64ToBlob(base64)
 const file = new File([blob], 'thumbnail.png')