Fastest way to output image from ajax call

Question

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

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

I want to make this process faster if possible.

Ideally, the php script handler will be able to output raw image data right after its processed changes with the corresponding mime header, but this cannot be done, since the same file should send a json response.

Any opinions and suggestions are welcome.

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

Due to the large number of operations available to change the image, telling my php script what needs to be changed using the url string, for example <img src='image.php?id=132&layer1=flip' /> , url often exceeded the recommended maximum number characters . Otherwise, that would be perfect.

I also tried sending the base64 source data back and processing it, and although I didn’t completely solve it, it got its flaws - adding base 64 data to src <img> not supported naturally in all browsers.

Answer 1

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

you need to render the image using <img src=""> . Now you do the following:

• The user clicks the button -> AJAX Request to Server -> Ajax Response with browser URL -> change src="" image and render it.

replace it with the following:

• The user presses the button → changes src="" the php file, which processing the manipulations and displaying it when ready.

will provide you with an explanatory 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> 

therefore, you transfer your php file through the picid , which you mean, do says which function you want to call, and what - in the graph, where are the degrees that you want to rotate. Your PHP file should return an image with the correct headers (for example, header('Content-Type: image/jpeg'); ), and the browser will load the image before the function finishes.

Answer 2

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

Answer 3

I am sure this will not lead to acceleration: you will need to encode the image data, attach it to JSON, decode on the client, and then draw. In addition, the likelihood that encoding image data in JSON will lead to a significantly larger amount of data to go to the wire, denying any accelerations, even if they were.

There is a funny little trick, though, that can shave a little more than both ends of your latency:

• Run an AJAX call to create the image.
• Immediately (without waiting for the result), start updating your image to a PHP script
• In this PHP script, wait until the image generation is finished and immediately send it (Sort a long poll for the image)

Thus, you save time from the moment the image is calculated, until the new image request arriving at the server:

• JSON build result
• HTTP processing return phase.
• Downstream network delay
• Client Processing Time
• Network latent stream for new image request
• HTTP processing time to request a new image