javascript - Canvas.toDataUrl 有时在 Chrome/Firefox 中被 chop

Question

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

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 中都看到了这种情况。

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

Answer 1

这是由于 LibGDX 未保留绘图缓冲区造成的。 LibGDX 人员非常友善地在现在可用的夜间构建中修复了此问题。

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

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

    return config; 
}