Canvas.toDataUrl 在 Chrome/Firefox 中有时会被截断答案

【问题标题】：Canvas.toDataUrl sometimes truncated in Chrome/FirefoxCanvas.toDataUrl 在 Chrome/Firefox 中有时会被截断
【发布时间】：2014-04-07 20:10:38
【问题描述】：

在我的 LibGDX 游戏的 HTML5 版本中，有时 canvas.toDataUrl("image/png") 会返回一个截断的字符串，生成黑色图像。

CanvasElement canvas = ((GwtApplication)Gdx.app).getCanvasElement();
String dataUrl = canvas.toDataUrl("image/png");
Window.open(dataUrl, "_blank", "");

奇怪的是，有时它会起作用。当它正常工作时，我得到了预期的 ~100KiB 图像，新窗口打开，地址栏只显示“数据：”。我可以将它发送到网络服务并从 Base64 转换为正确 PNG 的字节，OSX 预览也显示它很好。

当它不起作用时，新窗口会显示正确尺寸的黑色图像，以及带有 Base64 编码数据的地址栏（开始 data:image/png;base64,iVBORw0KGgoAAAAN...），但结束在似乎由浏览器 UI 呈现的省略号中，而不是实际数据字符串中的三个句点。本例中的数据约为 31KiB。当我尝试通过我的网络服务对其进行转码时，我得到了相同的黑色矩形。

我在 Chome 和 Firefox 中都看到了这种情况。

有什么想法吗？获取画布内容的代码非常简单，所以我看不出我怎么会做错。我在考虑浏览器中的错误，或者 LibGDX 和渲染的某种时间问题？

【问题讨论】：

也许它是在 glClear 和渲染之间捕获的？要检查这一点，您可以使用除黑色以外的另一种透明颜色，看看有时是否仍会出现黑屏，或者使用新的透明颜色。

标签： javascript html canvas libgdx

【解决方案1】：

这是由于 LibGDX 没有保留绘图缓冲区造成的。 LibGDX 人员非常友好地在现在可用的夜间版本中修复了这个问题。

更新到1.0-SNAPSHOT 的最新版本并设置以下标志现在可以可靠地工作：

    @Override
public GwtApplicationConfiguration getConfig () {
    if(config == null)
    {
        config = new GwtApplicationConfiguration(1280, 960);
        config.preserveDrawingBuffer = true;
    }

    return config; 
}

【讨论】：