Fetching images from a database

[mb2297]

I'm very impressed with the Google Web Toolkit, and I'm excited about
the power that AJAX could bring to my web applications.

I have a general question about how AJAX handles the fetching of images
from a database.

If you are storing images in a database, a standard way of doing it is
to use a BLOB. The traditional web-app way of doing things is to build
a static page on the server using something like php, and then transmit
it back to the client's browser. Recreating an image from a BLOB with
php is a snap:

header('application/JPEG')
echo $imgdata

How do you acheive the same thing with AJAX? I don't want to have my
server creating and destroying images all the time, just so they can be
downloaded by the client browser.

Having done some research, there does not seem to be a JavaScript way
of reinterpreting the BLOB data.

Is the only workaround to simply not store the images as BLOBs in the
first place, and just provide a URL/path?

Thanks in advance.

[rojoca]

You don't want to get BLOB data back via AJAX. For images to load just
update their SRC to point to the new image

If you want to change images without reloading your page all you need
to do with AJAX is get back an SRC of the new image you wan,t then
update the SRC of the old image. In some cases (like when you have only
a small number of images to cycle through) you won't even need AJAX.

Your SRC should be something like request_image.php?img_id=4 whose sole
purpose is to get the image data as you have above :

header('application/JPEG')
echo $imgdata

Alternatively you could show the image in an iframe, just give the
iframe the same request_image.php URL

[Michael]

What about situations where the programmer needs to grab a generated image from the backend where the data needed to generate the image is sizable enough that it requires it be done with POST and the back-end server doesn't offer an ability to cache or save the generated files.

I had someone on one of my LUG lists trying to figure that out less than a week ago.

--
http://www.tubmonkey.com/

[rojoca]

In that case, I'm not sure AJAX is the way to go, as you mentioned, I'm
not aware of there being any way javascript can create the image from a
binary stream. Also I'm not sure the responseStream xmlHttpRequest
property is supported on all browsers and I think the Mozilla
documentation says that some versions of their browsers only support
the text/xml mime-type for an AJAX response.

You'll have to think of some ingenious way or requesting the image.
Maybe posting from an iframe?

When SVG support is better across browsers, then AJAX will be perfect
for the situation you describe, provided you want to use that format of
course.

[Michael]

Probably so. I suggested since they couldn't write files to disk, to try keeping it in memory or db, and just passing back a reference that they could pass to a script when changing the src tag but that isn't really a very clean way of handling the problem. Not sure why he couldn't save any temp files to his webserver as that is probably the easiest method. SVG or canvas would be better but IE especially is lacking in support for these. I haven't tested to see if IE7 is going to support them or not but I can add that to my wishlist.

[mb2297]

I suppose there are a couple of options:

1. Using a small php script in an iframe to display the image. I'm not
sure how you could do that with GWT though - is there a way to make a
widget populate itself with external content?

2. Use the server code which is extracting the blob to turn it into an
actual file on the server, and pass back the URL to it.

All my server code is written in Java, and throwing php into the mix is
pretty messy. On the other hand, the second option needs some fairly
clever maintenance of the created files.

[Dmitry Dulepov]

mb2297 wrote:
> Recreating an image from a BLOB with
> php is a snap:
>
> header('application/JPEG')
> echo $imgdata

Completely wrong header... You need to re-read HTTP spec.

[Mr. Monster]

I'm I the only one who things storing images in database is not the
best idea?

What I do is I store the location the image is on the filesystem, then
I stream the file contents to the browser.

[Setoff 4 Success]

I quite agree with you. this approach makes sense. also means you can
link static html to that image.

Downside is that other people can link to your image and steal your
bandwidth.

Dean

[mb2297]

Storing images in a database seems to be somewhat of a taboo. Oracle
have a nice article explaining some of the pros:

http://www.oracle.com/technology/products/intermedia/htdocs/why_images_in_database.html

In any case, my database already exists and has images embedded into
it.

Thanks to Dmitry for pointing out my php error. I should have added a
"or something like that" clause after it.

[fin]

in that article Marcel Kratochvil saying that oracle works very well
with blobs, but what about with mySQL db, especially myisam? any
information about performance or benchmarks? any expirience about that?

[mb2297]

fin, try:

http://www.phpriot.com/d/articles/database/images-in-mysql/index.html

I don't think it refers to the specific storage engines though.

[mb2297]

I found an interesting article that shows how to process Base64 encoded
binary data directly in the browser:

http://dean.edwards.name/weblog/2005/06/base64-sexy/

It doesn't work in Internet Explorer though, and I believe the
workaround involves passing all the image data back to the server, and
then back again as the image. It'd be easier just to call a separate
php script which fetches the image from the database on it's own.

Still, once IE7 is released this may become a more standardized way of
passing image/binary data around.