IE 11 Problem with data URI images.

[neurofuzzy]

I am loading some Sprites using PIXI.Sprite.fromImage and instead of using a URL, I'm using a data URI ("data:image/png;base64, ... ")

This works fine in all other browsers, but in IE it will sometimes not load the image. It's completely inconsistent. Sometimes all images load, but usually either none or some of them load. I imagine this is probably an event not being fired or a race condition.

Also, I've found that when doing this in IE, I need to use Texture.fromImage and assign it to a new Sprite. Weird.

It works normally about half the time in Canvas, and almost never in WebGL.

And one other thing to note - if I use a data URI I need to specify crossorigin as true or it throws an error. No biggie but a usability issue.

[neurofuzzy]

I got this working consistently:

        var image = new Image();
        image.src = data_uri_string;
        var bt = new PIXI.BaseTexture(image);
        var texture = new PIXI.Texture(bt);
        var icon = new PIXI.Sprite(texture);
        image.onload = function ()
        {
            var bt = new PIXI.BaseTexture(image, PIXI.scaleModes.NEAREST);
            icon.texture = new PIXI.Texture(bt);
        };

It appears that SOMETIMES when an image is assigned a data URI, the image is not loaded instantly, and needs to be rebuilt. I see you have an onload handler in PIXI.BaseTexture, and I'm not sure why that's not working in this case.

[iirelu]

I'm not even sure if IE is even supported by pixi.js, it's pretty incredible you even managed to get it running.

[drkibitz]

I wonder if IE11 is sometimes reporting the wrong value for the img.complete property, a reduced test case would make that more clear.

[mattdesl]

In a previous project, we noticed some strange issues with image.complete in IE. Sorry I can't reproduce this or provide any test cases at the moment. I ended up changing BaseTexture to not rely on image.complete at all, but instead always load images in the same consistent manner:

var image = new Image();

//attach listener before setting src
image.onload = ...func...

//setup the source
image.src = '...';

[ekelokorpi]

I just tested Pixi on Windows 8.1 tablet, they use IE11.
Sometimes it doesn't show sprites at all, no matter if texture uses Data URI or normal URL.

It seems that sometimes even if img.complete is true, img.width and img.height are zero.

Adding width and height check to PIXI.BaseTexture solves the issue:

if((this.source.complete || this.source.getContext) && this.source.width && this.source.height)
{
    this.hasLoaded = true;
    this.width = this.source.width;
    this.height = this.source.height;

    PIXI.texturesToUpdate.push(this);
}
else
{

    var scope = this;
    this.source.onload = function() {

        scope.hasLoaded = true;
        scope.width = scope.source.width;
        scope.height = scope.source.height;

        // add it to somewhere...
        PIXI.texturesToUpdate.push(scope);
        scope.dispatchEvent( { type: 'loaded', content: scope } );
    };
}

Now all sprites are showing every time!

Would you accept PR?

[GoodBoyDigital]

hells yeah! :)

On Tue, Apr 1, 2014 at 1:31 PM, Eemeli Kelokorpi
notifications@github.comwrote:

I just tested Pixi on Windows 8.1 tablet, they use IE11.
Sometimes it doesn't show sprites at all, no matter if texture uses Data
URI or normal URL.

It seems that sometimes even if img.complete is true, img.width and
img.height are zero.

Adding width and height check to PIXI.BaseTexture solves the issue:

if((this.source.complete || this.source.getContext) && this.source.width && this.source.height)
{
this.hasLoaded = true;
this.width = this.source.width;
this.height = this.source.height;

PIXI.texturesToUpdate.push(this);

}
else
{

var scope = this;
this.source.onload = function() {

    scope.hasLoaded = true;
    scope.width = scope.source.width;
    scope.height = scope.source.height;

    // add it to somewhere...
    PIXI.texturesToUpdate.push(scope);
    scope.dispatchEvent( { type: 'loaded', content: scope } );
};

}

Now all sprites are showing every time!

Would you accept PR?

Reply to this email directly or view it on GitHubhttps://github.com//issues/614#issuecomment-39199391
.

[GoodBoyDigital]

Clsoing as this should be all good now in 1.5.3 👍 Thanks all!

[kanecko]

I still get this in IE9 and IE10 with Pixi 2.2.0.
http://codepen.io/anon/pen/ZYpQyj

It happens in PIXI.Sprite.prototype._renderCanvas at line

    else {
            renderSession.context.drawImage(
                                this.texture.baseTexture.source,
                                this.texture.crop.x,
                                this.texture.crop.y,
                                this.texture.crop.width,
                                this.texture.crop.height,
                                dx / resolution,
                                dy / resolution,
                                this.texture.crop.width / resolution,
                                this.texture.crop.height / resolution);

While in the codepen the tooltip text is initially set to an empty string, the error still happens when I set it to something non-empty.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.