HTML5 canvas toDataURL有时会返回"data:，"而不是图像

HTML5 canvas toDataURL sometimes returns "data:," instead of the image

本文关键字：quot 图像 data canvas 返回 toDataURL HTML5      更新时间：2023-09-26

我已经创建了一个画布，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太大....

您应该尝试明确创建一个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:,"
相关文章：