load and display PNG image (Not base64) requiring basic authentication in JavaScript -

i'm stuck on this. need retrieve picture e.g. http://ip:port/icon_contact.png using javascript server requiring basic authentication. server can't give base64. don't worry x-domain restriction. in advance, louenas

if i'm reading question correctly — no means certain — want retrieve binary data of image file providing basic authentication information directly (not via user).

you should able xmlhttprequest object (you can supply auth information in open call), read binary data response i'm sure you'll have stray brand-new and/or implementation-specific stuff. here links msdn, mdc, , (fairly new) w3c docs. microsoft's xmlhttprequest has responsebody, mozilla's (firefox's) has mozresponsearraybuffer, , believe w3c docs discuss binary data here.

to display image having loaded via above, transform binary data data url (more correctly "data uri", no 1 says that) string , assign result img tag's src. you'd have convert whatever browser-specific binary stuff base64 encoding (for data url). (you don't have write conversion yourself, quick search indicates people have been tackling problem , can reuse [and possibly contribute to] efforts...)

the bad news ie supports data uris of ie8, , limits them 32k, you'd have nifty slicing techniques google search preview.

once have data:// string, img tag part easy. if you're not using library:

var img, element;  img = document.createelement('img'); img.src = /* ... data uri ... */ element = /* ... find element want put image in, via                  document.getelementbyid or document.getelementsbytagname                  or other dom traversal ... */; element.appendchild(img);