rich Posted April 3, 2013 Share Posted April 3, 2013 So far I've always used a standard image loader method in my games. I.e. I'll create a new Image() and use the src and onload to load it from a list. This works fine and I'm happy with it, but have wondered if you can do the same via xhr. Writing an xhr loader is fine and I've got it working, loading the PNGs, but am stuck in how to get the image data out of the xhr.response in a format that I can then use in a canvas drawImage call (or even putImageData). Is it easily possible? Is there a way to maybe populate an Image() from the xhr loaded data? Is there anything you need to do to the responseType? Note for this I'm only targeting IE9 and above. Cheers, Rich Quote Link to comment Share on other sites More sharing options...
Chris Posted April 3, 2013 Share Posted April 3, 2013 The only possible way needs a serverside script that prepares your image before being sent over a XHR request. You need to base64 encode your image (makes it quite a lot bigger) and send it through the XHR request. On the client-side, you can take that base64 encoded response, create a new image object via javascript and set its src property to: 'data:image/png;base64,[YOUR RESPONSE]' while replacing [YOUR RESPONSE] with your base64 data. I am still searching for the reason why you want to do this via XHR instead of using an image object and listening to the onload event... Quote Link to comment Share on other sites More sharing options...
rich Posted April 3, 2013 Author Share Posted April 3, 2013 Yeah I feared that was the answer. The only reason I wanted to do it that way was because the load progress from xhr is perfectly smooth (byte by byte) vs. the lumped onload of an image. Quote Link to comment Share on other sites More sharing options...
Chris Posted April 3, 2013 Share Posted April 3, 2013 Plus image objects are incorporating the browsers cache, while XHR doesn't... Quote Link to comment Share on other sites More sharing options...
Ezelia Posted April 3, 2013 Share Posted April 3, 2013 there is maybe a possibility with Javascript implementation of PNGLib.I used it for some encryption stuff for a customer ... but I'm not sure if it'll be able to parse XHR loaded data Quote Link to comment Share on other sites More sharing options...
Chris Posted April 3, 2013 Share Posted April 3, 2013 Afaik XHR2 is designed for text only. Quote Link to comment Share on other sites More sharing options...
rich Posted April 3, 2013 Author Share Posted April 3, 2013 Nah xhr2 handles binary data just fine, it's the easiest way to load mp3s for example for webaudio playback. Just getting image data was harder (and it seems pointless) Quote Link to comment Share on other sites More sharing options...
Ezelia Posted April 3, 2013 Share Posted April 3, 2013 found it !here is the gist of the png parser I used https://gist.github.com/alaa-eddine/5305911 you can load a PNG image from XHR like this var cnv = document.createElement('canvas'); PNG.load(png_url, cnv); Quote Link to comment Share on other sites More sharing options...
rich Posted April 3, 2013 Author Share Posted April 3, 2013 Interesting.. thanks, I'll have a look I was wondering if you could xhr2 it with a blob type, but I still couldn't work out how to then get that data onto a canvas Quote Link to comment Share on other sites More sharing options...
Ezelia Posted April 3, 2013 Share Posted April 3, 2013 not sure to understand what you are trying to do...this code loads an image using XHR2 and create an image object from it <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body> <canvas id="cnv" width="100" height="100"></canvas><script> var ctx = document.getElementById('cnv').getContext('2d'); var xhr2 = new XMLHttpRequest(); xhr2.open("GET", 'cell2.png'); xhr2.responseType = "blob" xhr2.send(null); xhr2.onload = function () { var img = new Image(); img.src = window.URL.createObjectURL(xhr2.response); img.onload = function() { ctx.drawImage(img, 0, 0); } }</script></body></html> is this what you are looking for ? Quote Link to comment Share on other sites More sharing options...
rich Posted April 3, 2013 Author Share Posted April 3, 2013 Yes! Bingo, thank you Now I expect loads of browsers don't support createObjectURL of course. But that's still perfect, thank you. Quote Link to comment Share on other sites More sharing options...
rich Posted April 3, 2013 Author Share Posted April 3, 2013 Yeah thought as much, Chrome and Firefox are fine. But IE10 only and strangely even Safari/iOS need 6+. Still that's great, thanks. Quote Link to comment Share on other sites More sharing options...
Ezelia Posted April 3, 2013 Share Posted April 3, 2013 Now I expect loads of browsers don't support createObjectURL of course. But that's still perfect, thank you. haha yes like all other fun stuff in HTML5 JS tested OK on latest Chrome FF and IE10 ... not working with IE9 Quote Link to comment Share on other sites More sharing options...
Aduros Posted April 6, 2013 Share Posted April 6, 2013 Don't forget to call revokeObjectURL after the image loads to free it up: http://www.html5rocks.com/en/tutorials/file/xhr2/ I implemented blob image loading the other week for Flambe, getting progress events for image downloads is pretty nice! One iOS6 thing I ran into, blobs are supported, but not the blob XHR responseType, so I had to load it up as an arraybuffer and create a blob manually from that. That hackery is down in sendRequest() at https://github.com/aduros/flambe/blob/master/src/flambe/platform/html/HtmlAssetPackLoader.hx. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.