Jump to content

Best way to load image from URL


tips4design
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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