原始像素数据到 PNG 或绘制原始像素数据

Question

this.terrain = new jaws.Sprite({ x: 0, y: 0, image: this.currentLevel.terrainImage, scale_image: 6 });
var rawTerrain = this.terrain.asCanvasContext();
this.rawPixelData = rawTerrain.getImageData(0, 0, this.terrain.width, this.terrain.height).data;

这是我在 HTML5 游戏上创建新地图的代码。我正在使用 .png 地图。我还提取了它的原始像素数据，以便我可以读取地图中的碰撞和其他内容。

我想实现手榴弹，而这些手榴弹实际上会改变地图。我无法更改.png。您如何建议我在不使用另一种地图加载的情况下执行此操作（我想继续使用 .png 地图）？

我的想法是处理原始像素数据（非常可行）然后绘制它，但我不知道我该怎么做。我可以将原始像素数据转换为 .png 然后绘制吗？

我用 Javascript 寻找 libpng 并找到了 pnglets，但我认为重新制作 png 需要很长时间，而且它只会让游戏冻结很多。

有什么想法吗？提前谢谢你。

Answer 1

您可以使用canvas 的putImageData 方法将原始数据绘制到画布上：

this.terrain = new jaws.Sprite({ 
    x: 0, 
    y: 0, 
    image: this.currentLevel.terrainImage, 
    scale_image: 6 
});
var rawTerrain = this.terrain.asCanvasContext();
this.rawPixelData = rawTerrain.getImageData(
    0, 0, this.terrain.width, this.terrain.height
).data;

// modify the pixel data and return updated data..
var modifiedPixelData = modifyPixelData(rawTerrain.getImageData(
    0, 0, this.terrain.width, this.terrain.height
));
// Put the data back into the canvas.
rawTerrain.putImageData(modifiedPixelData, 0, 0)