Самый быстрый способ вывести изображение из вызова ajax

Question

Мой проект - это скрипт обработки изображений, использующий php, JavaScript и imagick (или imagemagick).

В настоящее время пользователь может изменять свойства изображения с помощью браузера, который затем jscript отправляет вызов Ajax моемуСценарий php для обработки изменений, сохранения изображения и отправки пути к файлу и ответа обратно в браузер, чтобы jscript мог затем обновить тег img.

Я стремлюсь ускорить этот процесс, если это возможно.

В идеале сценарий обработки php мог бы выводить необработанные данные изображения сразу после обработанных изменений с соответствующим заголовком mime, но этого нельзя сделать, поскольку тот же файл должен отправить ответ json.

Любые мнения и предложения приветствуются.

РЕДАКТИРОВАТЬ: я должен был упомянуть то, что я пытался до сих пор:

Из-за большого разнообразия доступных операцийчтобы изменить изображение, сообщая моему php-скрипту, что нужно изменить через строку URL, такую ​​как <img src='image.php?id=132&layer1=flip' />, URL часто будет превышать рекомендованный максимум количество символов .В противном случае это было бы идеально.

Я также пытался отправить необработанные данные base64 обратно и обработать их, и хотя я не полностью исключил эти данные, у него есть свои недостатки - добавление данных base 64 в src <img> не являетсяестественно поддерживается во всех браузерах.

Answer 1

Я не знаю, является ли это лучшим способом, но подумайте об этом:

Вы должны визуализировать свое изображение с <img src="">. Теперь вы делаете следующее:

• Пользователь нажимает кнопку -> Запрос AJAX к серверу -> Ответ Ajax с URL для браузера -> изменение src="" изображения и визуализация это.

заменить его следующим:

• Пользователь нажимает кнопку -> изменяя src="" файла php, который обработка манипуляции и отображение ее, когда будет готов

дать вам поясняющий код:

<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>

, поэтому вы передаете в свой php-файл через picid то, что вы имеете в виду, do говорит, какую функцию вы хотите вызвать, и what показывает, например, градусы, которые вы хотите повернуть. Ваш PHP-файл должен вернуть изображение с правильными заголовками (например, header('Content-Type: image/jpeg');), и браузер загрузит изображение до завершения функции.

Answer 2

Я совершенно уверен, что это не приведет к ускорению: вам нужно будет закодировать данные изображения, прикрепить их к JSON, декодировать на клиенте, а затем нарисовать. Кроме того, есть вероятность, что кодирование данных изображения в JSON приведет к гораздо большему объему данных для передачи по сети, сводя на нет любые ускорения, даже если они были.

Однако есть небольшой забавный трюк, который может сбить немного больше, чем обходной путь от вашей задержки:

• Начните вызов AJAX для генерации изображения
• Немедленно (не дожидаясь результата) запустите обновление изображения до PHP-скрипта
• В этом PHP-скрипте дождитесь окончания генерации изображения, а затем немедленно отправьте его (вроде длительного опроса для изображения)

Таким образом, вы сохраняете время с момента вычисления изображения до получения нового запроса изображения на сервере:

• результат JSON собирается
• возвратный этап обработки HTTP
• Задержка сети в нисходящем направлении
• Время обработки на клиенте
• Задержка сети в восходящем направлении для запроса нового изображения
• Время обработки HTTP для нового запроса изображения

Answer 3

Вы можете включить необработанные данные изображения как часть вашего ответа JSON, а затем соответствующим образом интерпретировать эти необработанные данные.