如何在PhaserJS 2中将像素画导出为PNG，解决canvas为null报错问题

你调用document.getElementById("canvas")返回null，是因为Phaser 2 内部创建的bitmapData对应的原生Canvas元素没有设置id="canvas"的DOM属性，所以无法通过该方法获取到元素，进而调用toBlob时触发报错。

Phaser 2 的bitmapData实例本身已暴露原生Canvas对象的引用，存放在.canvas属性中，你可以直接使用代码中已经初始化的全局canvas变量实现导出，无需从DOM树查询。

方案1：仅导出绘制的像素内容（无背景、网格） #

修改后的保存函数代码如下：

function save() { 
  // 直接调用bitmapData实例挂载的原生canvas对象
  canvas.canvas.toBlob(function(blob) { 
    saveAs(blob, "image.png"); 
  }); 
}

方案2：导出和页面显示一致的完整内容（含背景、网格） #

如果需要把背景层、网格层和绘制内容合并导出，可创建临时bitmapData合并所有图层后再导出：

function save() {
  // 创建和绘制区域尺寸一致的临时bitmapData
  const exportBmd = game.make.bitmapData(canvasBG.width, canvasBG.height);
  // 按渲染层级依次合并内容
  exportBmd.draw(canvasBG);
  exportBmd.draw(canvas);
  exportBmd.draw(canvasGrid);
  // 导出合并后的内容
  exportBmd.canvas.toBlob(function(blob) {
    saveAs(blob, "image.png");
  });
}

注：确保运行代码前已经正确引入FileSaver.js依赖。

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