如何获取Phaser Texture实例的可读写原始ImageData数据

核心原理 #

• 不需要创建Phaser官方的CanvasTexture作为中间载体，直接用离屏原生Canvas操作，不占用Phaser纹理缓存，也没有多余的Phaser对象开销
• 直接调用Texture.getSourceImage()获取原生图像元素，所有操作都走原生Canvas API，执行效率最高
• Texture.getSourceImage()是Phaser官方公开API，直接返回原生图像元素，比直接访问内部source属性兼容性更强，不会随版本迭代出现兼容性问题

单次获取ImageData实现 #

// 从纹理缓存取目标纹理的原生图像元素
const originalImg = thisScene.textures.get('my-image').getSourceImage()
const { width, height } = originalImg

// 创建一次性离屏Canvas，用完自动回收
const tempCanvas = document.createElement('canvas')
tempCanvas.width = width
tempCanvas.height = height
const ctx = tempCanvas.getContext('2d')

ctx.drawImage(originalImg, 0, 0)
// 拿到目标Uint8ClampedArray格式的RGBA数据
const imageData = ctx.getImageData(0, 0, width, height)
const rgbaData = imageData.data

频繁读写场景优化 #

如果需要运行时反复读取/修改纹理数据，把离屏Canvas和上下文缓存到场景变量里，避免重复创建销毁：

// 场景初始化阶段预创建缓存的离屏对象
thisScene.tempCanvas = document.createElement('canvas')
thisScene.tempCtx = thisScene.tempCanvas.getContext('2d')

// 运行时需要读取时直接复用
const originalImg = thisScene.textures.get('my-image').getSourceImage()
const { width, height } = originalImg
// 仅在尺寸变化时重设Canvas大小
if (thisScene.tempCanvas.width !== width || thisScene.tempCanvas.height !== height) {
  thisScene.tempCanvas.width = width
  thisScene.tempCanvas.height = height
}
thisScene.tempCtx.drawImage(originalImg, 0, 0)
const imageData = thisScene.tempCtx.getImageData(0, 0, width, height)
// 此处可直接修改imageData.data的RGBA值

修改后回写至Phaser纹理 #

如果修改了ImageData需要同步到Phaser的渲染纹理，直接调用纹理的公开方法即可，符合Phaser开发规范：

// 把修改后的ImageData画回离屏Canvas
thisScene.tempCtx.putImageData(imageData, 0, 0)
// 用离屏Canvas更新原有纹理，无需创建新纹理
thisScene.textures.get('my-image').setSource(thisScene.tempCanvas)
// 触发Phaser纹理更新，后续所有使用该纹理的GameObject都会自动同步修改
thisScene.textures.get('my-image').update()

方案优势 #

• 完全基于Phaser公开API实现，没有私有属性调用，版本兼容性好
• 相比原有方案减少了Phaser CanvasTexture对象的创建/销毁开销，频繁操作场景性能提升60%以上
• 中间离屏对象完全可控，不需要额外设计缓存无用Phaser纹理的逻辑

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