Pixi.js: How do I feed a JS Image() into a PIXI.Texture?

Created on 10 Dec 2014 · 14Comments · Source: pixijs/pixi.js

var someImage = new Image("some_image.png");
var pixiTexture = PIXI.Texture(someImage);

I get undefined errors. I know there is .fromImage(), but it takes a path and not a JavaScript Image() object. I know it also can take a canvas, but this is not a canvas but a JS Image object.

Source

RubrikBonnier

All 14 comments

new PIXI.Texture(new PIXI.BaseTexture(someImage))

PS documentation is at http://www.goodboydigital.com/pixijs/docs/classes/Texture.html

serprex on 10 Dec 2014

serprex:

I'm aware of the API page. I have it bookmarked and look at it all the time.
What you suggested doesn't work. I get empty screens and nothing logged.
Honestly... how did you expect me to figure that out by looking at the API page? Nothing indicates that you're supposed to do it this way. And, well, it doesn't seem to work either.

RubrikBonnier on 10 Dec 2014

👎3

serpex' line works perfectly though
The reason why you probably don't see anything is because your image hasn't loaded yet, you need to work with a callback, but it's hard to tell without seeing any real code.
To not have to deal with async JS stuff there is offcourse the assetloader route, which is easier and probably thats why it's being used in like all the examples. This problem of yours is just a plain JS problem though, hardly anything todo with pixi

here's a working example for you though http://jsfiddle.net/nikkikoole/332gdcna/3/

it's in CS but the gist of it in JS is

var someImage = new Image()
someImage.src = 'someSource.png'
someImage.onload = function(){
  new PIXI.Texture(new PIXI.BaseTexture(someImage))
}

NikkiKoole on 10 Dec 2014

@NikkiKoole That does not work because the image has to be on the same domain, you can't load images cross-origin in JavaScript and draw them to canvas.

Cristy94 on 10 Dec 2014

ah right I forgot some people arent using chrome, that fiddle _just works_ on my system, sry about that.

NikkiKoole on 10 Dec 2014

@RubrikBonnier The api page clearly states the first param to the texture ctor is a BaseTexture. You can even click it to see how to construct a base texture.

The code that @serprex posted works fine, you just need to wait for the image to load before using it in a texture (for webgl) or the image is blank when uploaded to the GPU and you need to manually update it.

Try:

var someImage = new Image();
someImage.src = 'someSource.png';
someImage.onload = function () {
    new PIXI.Texture(new PIXI.BaseTexture(someImage));
}

englercj on 10 Dec 2014

I get no errors logged. Nothing is displayed on the screen. The images used have been loaded prior to being used.