Cannot access imageData.data from a bitmapData

[yahiko]

I would like to apply a filter on a picture with a bitmapData as a proxy to apply pixel transformations.

The problem comes from the array imageData.data of a bitmapData which is filled with zeros instead of being filled with correct values.

Here is a piece of code to illustrate my issue:
 

var originalPic = game.add.sprite(0, 0, 'originalPic');var bmd = game.add.bitmapData(originalPic.width, originalPic.height);bmd.draw(originalPic);console.log(bmd.imageData.data); // ==> [0, 0, 0, 0, ...]var newPic = game.add.image(600, 0, bmd); // Display on screen is okay

Obviously, if I cannot access those data, I would not be able to make any computation on pixels. :/

[yahiko]

I came up with a solution by using the context attribute of a bitmapData, instead of using directly the imageData attribute.
 

var originalPic = game.add.sprite(0, 0, 'originalPic');var bmd = game.add.bitmapData(originalPic.width, originalPic.height);bmd.draw(originalPic);var imageData = bmd.context.getImageData(0, 0, originalPic.width, originalPic.height);console.log(imageData.data); // ==> now contains correct values// Here I can call my image processing function// ...var newPic = game.add.image(600, 0, bmd); // Display the processed image

So, BitmapData.imageData is quite buggy. I am going to report an issue about this on GitHub.

Thank you for having read me.

[yahiko]

Richard Davey kindly provided me yesterday a more elegant solution to solve my issue.


Instead of calling context.getImageData(), he suggested me using BitmapData.update() which refresh BitmapData.imageData after a call to BitmapData.draw() or copy(). This way, the previous code could be modified as follow:
 

originalPic = game.add.image(0, 0, 'originalPic');originalPic.width = 512;originalPic.height = 384;bmd = game.add.bitmapData(originalPic.width, originalPic.height);bmd.draw(originalPic);bmd.update(); // Refresh the bmd.imageData (from the context?)// Here I can call my image processing function// ...bmd.ctx.putImageData(bmd.imageData, 0, 0); // Put back the bmd.imageData onto the canvas contextnewPic = game.add.image(600, 0, bmd);

I still have extra questions related to BitmapData:
- I cannot figure out the real distinction between BitmapData.draw() and BitmapData.copy(). Both methods seem to behave the same.
- It would be useful for other people to turn this use case a an example in the Phaser documentation. How can I achieve that?