0

I need to display an image that is generated by the server. It is generated based on parameters supplied via URL. Problem is, parameters can be very numerous and long and as we know there is a limit to GET request length.

Here is a simplified version of the code:

View:

<img alt="Preview" src="/preview/getPreview/?id=1&page=1&values=%7B%22object_82%22%3A%22Test%22%2C%22object_83%22%3A%22Test2%22%2C%22object_84%22%3A%22Test3%22%7D&size=676">

This is a very short list of parameters there will be much more. As you can see values is actually a JSON stringified array.

The controller part of the code is more or less like this (not sure if it's actually relevant to the question but still here it is):

function getPreview() {
    $buffer = createImageFromData($id, $page, $values, false);
    $img = new Imagick();
    $img->setResolution(300, 300);
    $img->readimageblob($buffer);

    header("Content-type: image/jpeg");
    header("Content-Length: $lenght");
    header("Content-Disposition: inline; filename=preview.jpg");

    echo $img;
}

So the question is - how to display server generated dynamic images without having to do the src='' part that will simply get too long for some images.

RandomWhiteTrash
  • 3,974
  • 5
  • 29
  • 42
  • We did something similar - But just rewrote our urls - is this not something you can do? – William George Sep 17 '14 at 14:12
  • Another alternative is to use string compression: http://pieroxy.net/blog/pages/lz-string/index.html - You will however need to use the base64 version of LZW to use in a URL string. – William George Sep 17 '14 at 14:15
  • Not sure what you mean, how would I rewrite urls without loosing data? I mean there is no set list or limit to number of params, and length of each param is also unknown. As for compression, I guess if data is long enough there will be risk of running out of space even after compression, or am I wrong? – RandomWhiteTrash Sep 17 '14 at 14:17
  • When we did it, we only required maybe 7/8 parameters we rewrote the url to /w80/h203/r255/g234/b123/c2 - Took the key relating to the first letter - Then the number represented something that we could use eg. (w80 = width 80px). But as you don't have a set list thats tricky to do. As far as compression goes - eventually you will still run out of chars in your GET request. Which suggests if you are using this much data, you would be better off posting the information to your server and access it via an ID in the query string. – William George Sep 17 '14 at 14:27
  • Hm... do you mean like posting the data prior to and storing it say in DB, returning row id and then just send that id in src url? Please describe what you mean in an answer so I could accept it :) – RandomWhiteTrash Sep 17 '14 at 14:48
  • Would be interested in further understanding the use case here. IS the data being passed specific to a user such that you can eliminate the need to pass the data in URL altogether (i.e. using sessions instead) or are these URL's something that are public and repeated for many users across the website (but the actual image to be created and/or served is determined from the values). In this case you might look you use URL shortening techniques and maintain a map of the short URL codes to the data they represent. Is there any sort of caching or cache-busting in play here? – Mike Brant Sep 17 '14 at 15:01

1 Answers1

1

If you have a lot of information that you need to pass to the server. A get request is going to run out of space on older browsers fast: maximum length of HTTP GET request?

What you could do is using javascript, post the information to your server first before you show the image. If you would like to save the data to a database an return an ID that would be a good solution, you can then load the image with:

<img src="/preview/getPreview/?id=312">

If you do not want to save the data you could return a base64 encoded image directly, this isn't supported in < IE8 very well though. A response could look like:

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="alt="Base64 encoded image" width="150" height="150"/>

I mentioned that you should post via javascript so the generation wouldn't have to reload the page. This however is something you do not have to do.

Also - If you are generating the same image over again. We have experienced large page loading times due to the image creation script - So would suggest to cache the image if you can.

Maybe if you update your question to specifically state what your intentions are and what images you are trying create, I could taylor this answer better.

Community
  • 1
  • 1
William George
  • 6,735
  • 3
  • 31
  • 39