HTML: POST for images?

Question

Hello, I am working on a web-application in which dynamically-created images are used to display information. This data is currently sent to the images using a GET query-string but with more complex images and data I am worried about running into problems with the url character limit.

I could simply pass the record ID to the image and have this query the database but this would obviously increase demand on the server. Is there some way I could add an image retrieved using POST into a HTML document?

Thanks in advance.

Answer 1

In the end, I think quering the database will probably be faster. To get a small string (say up to 2000 characters) from the database is very quick and probably faster than having the user post it all the time, especially if there is more than 1 on a page.

The best option would be create the image once and cache it if it doesn't change. When the image is requested again, check to see if it's cached and just use readfile() to send it to the browser. I like to store the cached image outside the doc root so it's not accessible by others, but this may not be a factor in what you're doing (both caching and privacy).

The SESSION might be an option, but this is the best option when you need to regenerate the image on multiple pages with slight changes, so you don't have query the db each time.

Answer 2

Not easily - HTML doesn't include any intrinsic support for sending multiple POST requests and rendering the results as inline resources, as it does with <img /> <script /> and other tags that define a SRC attribute.

Even AJAX workarounds might not help you here. Changing the SRC attribute of an image is easy, but all that'll do is cause the browser to GET the new image (from the cache or the server, depending on your configuration). Actually changing the content of the image to a binary response from an HTTP POST is much more involved - although you could look into base64-encoding the response stream and using the data: URL scheme to display the resulting image in your page.

You can always have a form with "Click to view image" as the submit button, of course - you submit the form, the server responds with image/jpeg data, and your browser displays it as a standalone image. I'm pretty sure you can't do it inline, though.

Answer 3

One option could be to store this data in a session variable. You should do some tests to see which way your server(s) handle it better

Answer 4

To expand on Darryl Hein's comment:

With this, I'd recommend removing it from the SESSION after you are done with it. If it's in there all the time, PHP will load it on every page call, not just the image "page". – Darryl Hein

Yea I thought about this and agree, you don't want to clog the tubes with unneeded session data but what if you don't know when to remove the data? You can't just delete the session data after the image is created, what if the image is to be displayed twice? Unless the images themselves are cached for a certain period of time.

Something like this

Requesting page

<? //index.php
    $_SESSION['imagedata']['header'] = array('name'=>'Simon','backgroundcolor'=>'red');
    echo '<img src="image.php?image=header">';
    // more stuff
    echo '<img src="image.php?image=header">'; // same image
?>

Image script

<?  //image.php
    switch($_GET['image']){
        case 'header':
            if(isSet($_SESSION['imagedata']['header'])){
                // create image using $_SESSION['imagedata']['header'] data
                // create cached image
                unset($_SESSION['imagedata']['header']);
            else if(cache_file_exists()){
                // display cached file
            }else{
                // no data, use plan B
            }
        break;
    }
?>

Answer 5

If the image can be identified by an id just use that. Assuming that the same id should produce the same image each time just use some proxy to serve the images using standard HTTP caching support.

Answer 6

In some scenarios and under some limitations you could use an Iframe where you want your image to apear and post with a target attribute pointing to that iframe.

so the main page has an iframe. the main page has a form that posts the the I frame and the server returns an image that is displayed in the iframe.