如何从PhaserJS导出高分辨率图像或矢量格式图形

高分辨率位图导出（PNG/JPG） #

核心思路是离屏放大渲染后导出，不需要改动原有绘制逻辑，导出的位图清晰度可以按需调整，兼容WebGL/Canvas两种渲染模式。
操作步骤：

• 确定需要的导出倍率：日常屏幕显示用2倍（对应Retina屏清晰度），印刷用途用3-4倍即可，倍率过高会占用过多显存导致卡顿。
• 创建对应尺寸的离屏RenderTexture，把需要导出的Graphics（或者包含多个元素的Container）按倍率缩放后绘制到离屏纹理上。
• 调用离屏纹理的snapshot方法拿到图片数据，触发浏览器下载，导出完成后销毁离屏纹理释放内存。

对应示例代码的导出逻辑，直接加在create方法末尾即可：

// 以3倍高清导出为例
const exportScale = 3;
// 创建离屏高分辨率渲染纹理
const renderTexture = this.add.renderTexture(0, 0, config.width * exportScale, config.height * exportScale);
// 将目标图形缩放后绘制到离屏纹理
renderTexture.draw(graphics, exportScale);
// 导出为PNG并下载
renderTexture.snapshot((img) => {
  const downloadLink = document.createElement('a');
  downloadLink.href = img.src;
  downloadLink.download = 'phaser-graphics-hd.png';
  downloadLink.click();
  // 清理临时资源
  renderTexture.destroy();
}, 'image/png', 1);

注意：如果需要导出整个场景的内容，直接把graphics替换成场景的defaultCamera或者存放所有元素的Container即可，不需要逐个处理单个对象。

矢量格式导出（SVG/PDF） #

Phaser的Graphics对象本身存储了全量的绘制指令（形状坐标、填充/描边样式等），不是纯像素内容，完全可以导出为无限放大不失真的矢量格式，有两种实现路径：

• 轻量场景手动映射：如果绘制的图形比较简单，直接在绘制时同步记录形状和样式参数，拼接成标准SVG字符串即可。比如示例里的两个渐变圆形，生成的SVG代码如下，导出后可以直接用在网页、设计软件里，也可以进一步转成PDF格式：

// 拼接SVG内容，viewBox固定的前提下可以任意调整导出尺寸不模糊
const svgStr = `
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
  <defs>
    <linearGradient id="fill1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ff0000"/>
      <stop offset="1" stop-color="#0000ff"/>
    </linearGradient>
    <linearGradient id="fill2" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ff0000"/>
      <stop offset="1" stop-color="#ffff00"/>
    </linearGradient>
  </defs>
  <circle cx="300" cy="300" r="200" fill="url(#fill1)"/>
  <circle cx="500" cy="300" r="140" fill="url(#fill2)"/>
</svg>
`;
// 转成Blob触发下载
const svgBlob = new Blob([svgStr], { type: 'image/svg+xml' });
const blobUrl = URL.createObjectURL(svgBlob);
const link = document.createElement('a');
link.href = blobUrl;
link.download = 'phaser-graphics-vector.svg';
link.click();
URL.revokeObjectURL(blobUrl);

• 复杂场景自动转换：如果绘制逻辑复杂、图形元素多，可以直接遍历Graphics内部存储的绘制命令队列，自动把fillCircle、fillRect、lineTo、fillPath这类指令转换成对应的SVG路径、形状标签，自动同步填充色、描边、透明度、渐变等样式，不需要改动原有绘制代码。

避坑提示 #

• 不要直接抓取页面上显示的canvas元素调用toDataURL导出，这种方式拿到的图片分辨率和canvas的CSS显示尺寸一致，放大后会模糊。
• 渐变、混合模式、透明度等效果在转SVG的时候需要对应匹配SVG的原生属性，才能保证和Phaser内渲染效果完全一致。
• 位图导出的倍率不要设置超过6倍，否则会占用大量显存，容易导致页面崩溃。

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