canvas.toDataUrl() 실행시 빈 이미지

Question

1. this website으로 이동하십시오.

2. 콘솔을 열고 쓰기 :

`

var canvas = $("#mandelbox-canvas")[0]; 
var imgData = canvas.toDataURL("image/png").split(',')[1]; 
console.log(imgData); 

복사 데이터 URL

과 this site에 붙여 넣습니다.

왜 이미지가 비어? 이 문제를 어떻게 해결할 수 있습니까?

상황은 이미 시도 :

I have tried the solution to this question. I.E. 이 코드 :

var canvas = $("#mandelbox-canvas")[0]; 
canvas.getContext('webgl',{preserveDrawingBuffer:true}); 
var imgData = canvas.toDataURL("image/png").split(',')[1]; 
console.log(imgData) 

그러나 이미지는 여전히 비어 있습니다. 이미지에 캔바스에 표시된 이미지가 없습니다.

Answer 1

그래서 이후에 많은 내가 찾은 StackOverflow의를 통해 트롤 어업 기능 drawScene()하는 (어떻게 든?) 힘 toDataURL() 필요에 따라 이미지 데이터 돌아갑니다 :

var canvas = $("#mandelbox-canvas")[0]; 
drawScene() 
var imgData = canvas.toDataURL("image/png").split(',')[1]; 
console.log(imgData)