Best way to load image from URL

[tips4design]

What is the cleanest way to make assetloader support loading images from URL (crossdomain) ?

 

My idea was to place all the URLs in a separate array, wait for all of them to load (with img.src =  "" and img.onload event) and after that create the sprites using directly the image data. Does AssetLoader (or at least sprite.fromImage) support loading images cross-domain?

 

Thanks!

[LinkTree]

While it is not recommended due to security reasons it is possible to do it if you set the image's crossOrigin property to an empty string and put the image handling code in the onload event like you said.

In the handling code you will need to create a new canvas and draw the image into it and then convert the canvas into a dataURL. from there you can load the dataURL into PIXI using "PIXI.Sprite.fromImage(imgURL)"

 

oh and one more important thing! the image's server most allow CORS images otherwise it wouldn't work.

http://davidwalsh.name/cross-domain-canvas-images

img.crossOrigin = '';img.src = "https://lh3.googleusercontent.com/-DZWdQdfqhD0/VH3okGCpocI/AAAAAAAAALA/VeWHZzMdJmY/h120/bunny.png";img.onload = function() {    var c = document.createElement('canvas');    var ctx = c.getContext("2d");    ctx.drawImage(img, 0, 0);    imgURL = c.toDataURL();}

[tips4design]

Ok, thanks for your answer. So there is no way to directly integrate it in assetLoader, I have to create each sprite from the imageURL.

[LinkTree]

my bad it seems like it is already implemented in the code of pixi.js.

you can load a crossorigin image using the assetLoader.

 

the only problem is that at least from my testing it doesn't work with the WebGL renderer so you have to use the CanvasRenderer instead.

 

http://jsfiddle.net/dj7ta89d/2/

    // create an array of assets to load    var assetsToLoader = ["https://dl.dropboxusercontent.com/u/139992952/coffee.png"];    // create a new loader    loader = new PIXI.AssetLoader(assetsToLoader,true);    // use callback    loader.onComplete = onAssetsLoaded;    // create an new instance of a pixi stage    var stage = new PIXI.Stage(0xFFFFFF);    // create a renderer instance    var renderer = new PIXI.CanvasRenderer(1024, 640);    //begin load    loader.load();    // add render view to DOM    document.body.appendChild(renderer.view);    function onAssetsLoaded(){        background = PIXI.Sprite.fromImage("https://dl.dropboxusercontent.com/u/139992952/coffee.png");        stage.addChild(background);        animate();    }    function animate(){        requestAnimFrame(animate);        renderer.render(stage);    }

Update: It seems like the WebGL renderer does in fact work with cross domain images. you just have to make sure the CORS enabling headers are on the image response.

 

so do the same as above but replace CanvasRenderer with autoDetectRenderer.