4

My project is an image processing script, using php, JavaScript and imagick (or imagemagick).

Currently, a user can change properties of an image with a browser which then jscript sends an Ajax call to my php script to process the changes, resave the image and send the file path and response back to the browser so jscript can then refresh the img tag.

I'm looking to make this process faster if possible.

Ideally, the processing php script would be able to output the raw image data straight after its processed changes with the appropriate mime header, but this can't be done as the same file needs to send a json response.

Any views and suggestions welcome..

EDIT: I should have mentioned what I have tried so far:

Because of the wide variety of operations available to alter the image, telling my php script what to alter via url string like <img src='image.php?id=132&layer1=flip' /> the url would often exceed the recommended maximum number of characters. Otherwise this would have been ideal.

I have also tried sending the base64 raw data back and processing it and although I haven't completely ruled this one out, it's got its drawbacks - adding base 64 data to the src of an <img> is not naturally supported in all browsers.

Community
  • 1
  • 1
digout
  • 4,041
  • 1
  • 31
  • 38
  • 1
    Good links: http://stackoverflow.com/questions/246801/how-can-you-encode-to-base64-using-javascript and http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/ – Eliseu Monar dos Santos Feb 26 '12 at 17:27
  • 1st link not an option as it needs to be cross browser friendly, +1 for the 2nd link as it's interesting but only works for PNG. – digout Feb 26 '12 at 18:37

3 Answers3

2

I don't know if this is the best way, but think about that:

you have to visualize your image with an <img src="">. Now you make following:

  • User clicks on button -> AJAX Request to Server -> Ajax Response with URL to browser -> changing the src="" of the image and visualize it.

replace it with following:

  • User clicks on button -> changing the src="" of the php file which processing the manipulation and display it when ready.

give you some explaining code:

<img src="image.php?picid=123123" id="#image"><button id="#rotate90">rotate</button>
<script>
$("#rotate90").click(function(){
  $("#image").attr("src","image.php?picid='123123'&do=rotate&what=90");
}
</script>

so you transmit to your php file via picid which pic you mean, do says what function you want to call and what is in dies example the degrees you want to rotate. Your PHP File has to give a Picture back with the correct headers (e.g, header('Content-Type: image/jpeg'); ) and the browser will load the image till the function finishes.

Neysor
  • 3,893
  • 11
  • 34
  • 66
  • Thanks for your answer, and I have considered this option a while back, but the user can carry out many different operations, typically the url would end up being 2000 - 3000 characters long which would not make it cross browser compatible. – digout Feb 26 '12 at 20:59
  • 2000 - 3000 characters? Isn't there a possibiliy to make this shorter? I don't think that this isn't possible ;) maybe i can help you solving this Problem :D – Neysor Feb 26 '12 at 22:43
  • The image represents a collection of layers, each layer has a collection of properties such as positioning, rotation, colour, size, style and significantly - text. There is really no limit to the number of layers but sensibly I can't see this going higher than say 20 layers, again, text in each layer can easily be anything from 20 to 200 characters long.. – digout Feb 26 '12 at 22:47
  • 1
    But you do not send the whole information each time, do you? You can cach all layers which have no changig information and then you only have to send the difference. This will be much faster and would shorten the request. And if this is just impossible just for a few operations you can handle that by checking this in your script. – Neysor Feb 26 '12 at 23:18
  • I may have skipped this - I started earlier in my project to send a flag with each request and only the data that the flag applied to i.e. 'move' and then supply x and y position, then use $_SESSION to hold the layer info and recall the rest of the layers. Is this what you mean? I think I ended up reverting to the 'process every time' method because at the time I didn't have a lot of properties to alter, which has now grown some what.. – digout Feb 26 '12 at 23:48
  • I did mean something like that, sry now I do not know what you can do more ;) But I will think about it. Perhaps I have an idea later ;) – Neysor Feb 27 '12 at 06:19
1

You can include the raw image data as part of your JSON response, and then interpret that raw data accordingly.

Dhaivat Pandya
  • 6,499
  • 4
  • 29
  • 43
  • Should have said that I tried this already. At the moment it's the better than nothing option. – digout Feb 26 '12 at 18:32
1

I am quite sure, this will not lead to a speedup: You would need to encode the image data, attach it to the JSON, decode on the client, then draw. Additionally chances are, the encoding the image data to a JSON would result in a much bigger volume of data to go ver the wire, negating any speedups, even if there were any.

There is a funny little trickt though, that can shave a bit more than a roundtrip off your latency:

  • Start your AJAX call to generate the image
  • Immediately (without waiting for the result) start your image refresh to a PHP script
  • In this PHP script, wait for the image generation to finish, and then immediately send it (Sort of long poll for an image)

This way you save the time from the moment the image is calculated, up to the new image request arriving on the server:

  • the result JSON being assembled
  • return phase of HTTP processing
  • Network latency downstream
  • Processing time on client
  • Network latency upstream for new image request
  • HTTP processing time for new image request
Eugen Rieck
  • 64,175
  • 10
  • 70
  • 92
  • I'll give it a whirl, I will have to adapt my error handling code should the image processing fail, but if it speeds things up a little then that's no issue.. – digout Feb 26 '12 at 18:31
  • Before I try, won't there be an issue if the image is refreshed before the php script has had a chance to save the updated image? – digout Feb 26 '12 at 18:40
  • This is exactly the point: The PHP script must wait for image generation to finish – Eugen Rieck Feb 26 '12 at 18:43