javascript - 执行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。 IE。这段代码:

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

但是图像仍然是空白的。该图像不包含 Canvas 上显示的图像。

Answer 1

因此，经过 StackOverflow 的大量搜索后，我发现了函数 drawScene() ，它(以某种方式？)强制 toDataURL() 根据需要返回图像数据:

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