Phaser.js游戏WebGL Canvas上传Imgur后显示黑屏问题求助

问题核心 #

使用Phaser.js开发WebGL游戏时，通过toDataURL将Canvas转为图片上传至Imgur，API返回成功但图片显示全黑，已尝试添加preserveDrawingBuffer: true参数但无效。

原因分析 #

1. 上下文参数设置时机错误：在canvasToImage函数中重新调用getContext("webgl", {preserveDrawingBuffer: true})无效，因为WebGL上下文一旦创建，参数无法修改，必须在Phaser初始化时配置。
2. 渲染帧捕获时机不对：toDataURL可能在Phaser完成当前帧渲染前执行，导致捕获到未绘制的空白画布。
3. 无效的上下文重新获取：重复获取WebGL上下文会干扰现有渲染状态，反而导致捕获失败。

解决方案 #

方案1：初始化Phaser时配置preserveDrawingBuffer #

在创建Phaser游戏实例时，直接在WebGL配置中启用preserveDrawingBuffer，确保上下文初始化时就保留绘图缓冲区：

const game = new Phaser.Game({
  type: Phaser.WEBGL,
  width: 800,
  height: 800,
  webgl: {
    preserveDrawingBuffer: true // 关键配置
  },
  scene: {
    create: create
  }
});

方案2：移除无效的上下文重新获取 #

删除canvasToImage中重新获取WebGL上下文的代码，避免干扰现有渲染：

function dataURLtoBlob(dataURL) {
  const bin = atob(dataURL.split(',')[1]);
  const buffer = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) {
    buffer[i] = bin.charCodeAt(i);
  }
  return new Blob([buffer], { type: 'image/png' });
}

function canvasToImage() {
  // 移除无效的上下文重新获取代码
  const imageData = game.canvas.toDataURL("image/png");
  const blob = dataURLtoBlob(imageData);

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "https://api.imgur.com/3/image");
  xhr.setRequestHeader('Authorization', 'Client-ID XXXXXXXXXXXXXXXX');

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.response);
    } else {
      console.error(xhr.response.data);
    }
  };

  xhr.send(blob);
}

方案3：确保在渲染完成后捕获画面 #

如果仍有问题，利用Phaser的postRender事件，在当前帧渲染完成后再执行捕获：

function canvasToImage() {
  // 获取当前活跃场景
  const currentScene = game.scene.getScenes(true)[0];
  // 监听一次渲染完成事件
  currentScene.sys.renderer.postRender.addOnce(() => {
    const imageData = game.canvas.toDataURL("image/png");
    const blob = dataURLtoBlob(imageData);
    
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "https://api.imgur.com/3/image");
    xhr.setRequestHeader('Authorization', 'Client-ID XXXXXXXXXXXXXXXX');

    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log(xhr.response);
      } else {
        console.error(xhr.response.data);
      }
    };

    xhr.send(blob);
  });
}

验证步骤 #

1. 按上述方案修改代码后重启游戏
2. 触发上传按钮，先在本地测试imageData：创建一个<img>元素，将imageData赋值给src，确认画面正常显示
3. 再上传至Imgur，检查返回的图片URL是否显示正常

内容的提问来源于stack exchange，提问作者Hassy