angular-threejs/angular-three

please ask your question related to capturing.

ldu0009 opened this issue · 2 comments

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

Have you tried:

<ngt-canvas [gl]="{ preserveDrawingBuffer: true }" />

@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')