HTML5 画布 toDataURL 有时会返回“data:”而不是图像

Question

我用document.createElement("canvas")创建了一个画布：

var canvas = document.createElement("canvas");
canvas.width = width;     // width = 4000 or more
canvas.height = height;   // height = 5000 or more

然后我使用canvas.toDataURL() 来获取它的base64字符串：

var str = canvas.toDataURL();

但“str”有时会返回为"data:,"，其中没有图像数据。就这六个字符。

有时它会返回正确的字符串，例如"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEGgAABPsCAYAAABg/aH3AAAgAElEQVR4XuzcQREAAAjDM..."

我的canvas.width 太大了....

Answer 1

您应该尝试显式创建 2D 上下文，然后在其中绘制一个空形状，例如：

var canvas = document.createElement("canvas");
canvas.width = 4000;
canvas.height = 5000;
var ctx=canvas.getContext('2d');
ctx.fillRect(0,0,0,0);
canvas.toDataURL();

编辑：您的画布似乎包含太多数据，无法导出为 dataUri：

var canvas = document.createElement("canvas");
canvas.width = 400000000;
canvas.height = 500000000;
var ctx=canvas.getContext('2d');
ctx.fillRect(0,0,0,0);
canvas.toDataURL();
// outputs : "data:,"