본문 바로가기

Code

WebGL capture canvas to black image 에 대한 나의 생각

1. 코드에 실수가 있는 경우  ex ) jpeg 등

 

2. 실수가 없는데 진짜 안되는 경우

 

지금 00:00 가 넘어갔기때문에 사무실에서 간단히 적어봅니다.

 

일단  Canvas 는 하나의 Context 를 가지고 있습니다. (ctx 이라고 적습니다.)

 

근데 나는 3D를 그리고 있는 캔버스에서  get2dContext 를 하면 당연히 안됩니다. 

->  그런데도 캡쳐를 하고 싶다.  (canvas to image) 를 하고 싶으면 

 

방법은 1. 캔버스를 하나 더 만들고 거기에다가 buffer들을 옮겨서 그리고  다운 하는 것

 

내 추천 방법2는 

https://forum.playcanvas.com/t/solved-creating-a-screenshot-in-playcanvas/1211

 

[SOLVED] Creating a Screenshot in PlayCanvas

Hi, we’re trying to create a script to capture screenshots from the application canvas, according to what we found on the web, when using a WebGL renderer, one has to tell this renderer to preserve the draw buffer, otherwise the screenshot will be empty.

forum.playcanvas.com

https://stackoverflow.com/questions/32556939/saving-canvas-to-image-via-canvas-todataurl-results-in-black-rectangle

 

Saving canvas to image via canvas.toDataURL results in black rectangle

Im using Pixi.js and trying to save a frame of the animation to an image. canvas.toDataUrl should work, but all i get is a black rectangle. See live example here the code I use to extract the imag...

stackoverflow.com

이 두번째 SO 답변이다. 그렇다 항상preserveBuffer 가 문제다.