Quickest way to output image from an ajax call - php

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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