Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Strange behavior when adding an image to the cache


yahiko
 Share

Recommended Posts

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: mini_423409DitheringIssueGoogleChrome.pn (ok)
Mozilla Firefox: mini_625563DitheringIssueMozFirefox.png (nothing)
Microsof Edge: mini_634483DitheringIssueMSEdge.png (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!

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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! :D

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;};
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...