Embed image in html with ajax

[Manuel]

Hello.
I need to embed an image, that it is obtained through an ajax
petition, in html document. In the ajax response I get the image data
encoded at png format.

How can embed this data buffer in an image object an show in the html
document?

 

[Manish Tomar]

Hello.
I need to embed an image, that it is obtained through an ajax
petition, in html document. In the ajax response I get the image data
encoded at png format.

How can embed this data buffer in an image object an show in the html
document?

Nice question. I have been wondering about this for some time and I've
managed to find this link related to your question:
http://squio.nl/blog/2006/08/25/remotely-extracting-image-thumbnails-with-binary-ajax/
If you do understand and manage to do it, please inform me how you did
it.

Thanks,
Manish
(manishtomar.blogspot.com)

 

[ASM]

Manish Tomar a écrit :

Nice question. I have been wondering about this for some time and I've
managed to find this link related to your question:
http://squio.nl/blog/2006/08/25/remotely-extracting-image-thumbnails-with-binary-ajax/
If you do understand and manage to do it, please inform me how you did
it.

In this page I read :
"Append a new image, set source to thumbnail data (hex-encoded as
data:xxx/yyy URL)."

And I think IE can do nothing with this ...

Try this code :
<img
src="data:image/gif;base64,R0lGODlhMAAwAPMAMf//////Mf//AP/OAM6%0AcAFJSUgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMAAwAAAE/7DISa%0Au9+I69syQg+IWex3FYqK5iqZ1Dys6Ea8HxRdM2hcuqCqsn+emCwFrPaFl5kC5mk/Skl%0AqTTVgaawQqtW/DrVOImTTCX+ai9pdVittJNtq2z88q7d6f060R9E3d7fIIFhChEg4KJ%0AHYuMZkN6gJCIO5M+ipaRmGKVnJeebYWhnXNQpaaLXqs2rQGuaKASAQKyGK0CArG4lLQF%0Atru+msABx8fERarBvMjKurvIvbiwu87J1czC0s+y1tfY1KbR4eKu4OHB3qHp17Xslu7%0AD8NP28XSbFOb09ff2XbZx6+fvH74J825VMHhvjL4JAwmi28aPWEKLFM1hNFbRVzl1uAIiAAA7"
alt="">

or visit :
http://en.wikipedia.org/wiki/Data:_URI#Format

 

[Manuel]

instead of getting the image data, what about getting the source/address of
the image, and have your code make a new <img> with it?

i can get the source/address of the image and send to de web via ajax
script. but, the navigator can render the image asynchronous? don't
need this to make a new petition to the server?

 

[Manuel]

Manish Tomar a écrit :



In this page I read :
"Append a new image, set source to thumbnail data (hex-encoded as
data:xxx/yyy URL)."

And I think IE can do nothing with this ...

Try this code :
<img
src="data:image/gif;base64,R0lGODlhMAAwAPMAMf//////Mf//AP/OAM6%0AcAFJSUgAAA­AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMAAwAAAE/7DISa%0Au9+I69syQg+IWex­3FYqK5iqZ1Dys6Ea8HxRdM2hcuqCqsn+emCwFrPaFl5kC5mk/Skl%0AqTTVgaawQqtW/DrVOImT­TCX+ai9pdVittJNtq2z88q7d6f060R9E3d7fIIFhChEg4KJ%0AHYuMZkN6gJCIO5M+ipaRmGKVn­JeebYWhnXNQpaaLXqs2rQGuaKASAQKyGK0CArG4lLQF%0Atru+msABx8fERarBvMjKurvIvbiwu­87J1czC0s+y1tfY1KbR4eKu4OHB3qHp17Xslu7%0AD8NP28XSbFOb09ff2XbZx6+fvH74J825VM­HhvjL4JAwmi28aPWEKLFM1hNFbRVzl1uAIiAAA7"
alt="">

or visit :http://en.wikipedia.org/wiki/Data:_URI#Format

Yes, i know and i need that it work in every browser

 

[Manish Tomar]

i can get the source/address of the image and send to de web via ajax

script. but, the navigator can render the image asynchronous? don't
need this to make a new petition to the server?

What do you mean by the statement "source/address of the image and
send to de web via ajax
script"? Does it mean you'll manually send http request to the
address, get the image content on page, convert it into base64 and use
the above technique to display it? Or you'll add a new <img> tag with
given address? I think the latter is much better option. In fact, you
can have one img tag whose src attribute can be changed to point to
new address. Browser will automatically retrieve it in background and
display it. What say?

 

[Manuel]

What do you mean by the statement "source/address of the image and
send to de web via ajax
script"? Does it mean you'll manually send http request to the
address, get the image content on page, convert it into base64 and use
the above technique to display it? Or you'll add a new <img> tag with
given address? I think the latter is much better option. In fact, you
can have one img tag whose src attribute can be changed to point to
new address. Browser will automatically retrieve it in background and
display it. What say?

The latter option is good. i can use it as a last resort.
But I will describe a little more my case: I am designing an
application web with struts.
Well, I have a servlet that generate a graphic.
This servlet set the content-type to image and write in the response
de data raw. I don't need store that image in disk and moreover,
i request to this servlet asynchronously. For this reason, the latter
option, in spite of it is ok, isn't the better.
I would like to send the data raw and the browser will render it.

I can do this but with sincronous petition.
In the jsp page I have this tag: "<img src="showimage.do"/>
The server take charge of generate the image and assign it to the img
tag.
Then, it will send the html page rendered with the graphic embedded.

I want to do this but asincronously.

well, I don't know if you understood to me.

Thank you very much