Strange behavior when adding an image to the cache

[yahiko]

Into a Web application with Phaser, I am currently trying to dynamically load a local image in order to replace an existing one.
To do so,

1. I load the image with the HTML5 FileReader object.
2. Then call the Cache.addImage() method to store the image content into the Phaser's cache.
3. And I call Game.add.image() to create the picture into the world.

Here is an excerpt of my code:
 

var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onloadend = function () {    // Clean existing environment    game.cache.removeImage('originalPic', true);    originalPic.destroy();    // Store loaded data into a DOM Image    var domImage = new Image();    domImage.src = reader.result;    // Store​ the DOM Image into the Phaser's cache    var cachedImage = game.cache.addImage('originalPic', '', domImage);    // Create the image into the Phaser's world​    originalPic = game.add.image(0, 0, 'originalPic');    // ...};

This code works fine in Google Chrome (v44.0.2403.130).
But it behaves strangely in Mozilla Firefox (v39.0) and in Microsoft Edge (v20)

Here are screenshots showing the result with each of those three browsers for my first attempt to load a local image:
Google Chrome:  (ok)
Mozilla Firefox:  (nothing)
Microsof Edge:  (invisible original image, but processed...)
 

A link to experience the issue by yourself is available here.

During the first try, after drawing the image, with Firefox, it seems originalPic.width and originalPic.height are equal to zero.

 

I need to try a second time to load a same image to make it works (originalPic.width and originalPic.height have correct values then).

 

Any idea to solve this problem would be strongly appreciated.

 

Thanks!

[rich]

You need an onload event, and you should only add the image into the cache at that point. I know the image is created from a file reader, but FF (and others) don't treat it as loaded at that point.

[yahiko]

Thanks for you suggestion. I've added a listener to an onload event and now it works better with Firefox.

 

Here is the updated code:

 

var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onloadend = function () {    // Clean existing environment    game.cache.removeImage('originalPic', true);    originalPic.destroy();    // Store loaded data into a DOM Image    var domImage = new Image();    domImage.src = reader.result;    // Store​ the DOM Image into the Phaser's cache    domImage.addEventListener('load', function () {        var cachedImage = game.cache.addImage('originalPic', '', domImage);        // Create the image into the Phaser's world​        originalPic = game.add.image(0, 0, 'originalPic');        // ...    });};

 

However, I still have this troublesome issue with Edge...

[rich]

The event listenered should be set-up *before* you set the image.src property (as that is what triggers the load).

 

Doubt this will resolve the Edge issue, no idea what that is - but it needs doing anyway.

[yahiko]

You are right. I've put domImage.src statement after defining the event listener.

But as predicted, it has not solved the Edge issue.

EDIT: In fact it solved the issue for Edge too. I forgot to clean... the cache!

Final code:

 

var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onloadend = function () {    // Clean existing environment    game.cache.removeImage('originalPic', true);    originalPic.destroy();    // Store loaded data into a DOM Image    var domImage = new Image();    // Store​ the DOM Image into the Phaser's cache    domImage.addEventListener('load', function () {        var cachedImage = game.cache.addImage('originalPic', '', domImage);        // Create the image into the Phaser's world​        originalPic = game.add.image(0, 0, 'originalPic');        // ...    });    domImage.src = reader.result;};