HTML5 canvas 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:,"