Gorky
@Gorky
Веб-разработчик

Как реализовать хранение изображений отдельно от кода и запрос нужного размера на лету?

Всем добрый день друзья. Я сейчас делаю бэкенд для мобильного приложения заказчика. Хочу отделить хранение оригинала и уменьшенных копий изображений от сервера с кодом. Так же хотелось бы для удобства фронтендеров сделать запрос изображений нужного размера "на лету".

То есть желаемый пример реализации условно такой:
1. Фронтенд присылает на бэкенд фотографию, выбранную пользователем.
2. Я не сохраняю ее там же у себя, а загружаю в какой-то сервис (облачное хранилище? cdn?) через апи, получаю в ответ уникальный идентификатор этого изображения. Т.е. по сути в бэкенде храню только этот id и ничего больше.
3. Идентификатор используется на фронтэнде, позволяя получить это изображение разного размера для вывода в интерфейсе, запрашивая их на лету через адрес. Схематично, такой: https://some-cloud-storage.ru/image-id/?width=500. Т.е. адрес можно просто вставить в тег img src="..." и получить уменьшенное изображение.

Собственно, вопрос - как это реализовать, через какой сервис?
Важное уточнение - для заказчика принципиально важно не использовать зарубежные проекты, вроде амазона.

Я примерно понимаю что мне надо видимо смотреть в сторону cloud storage и cdn в яндекс облаке или вк облаке. Как туда загружать оригиналы изображений понимаю. А вот как сделать так чтобы можно было запрашивать потом копии любого размера - искал искал и не нашел что-то. Неужели самому предварительно пережимать и загружать? И вроде как хранилище и cdn надо тоже объединить вместе (cdn поверх хранилища?).

Вроде задача звучит не очень сложно, но в единую картинку не собирается. Хочется какое-то относительно простое и понятное решение.

В общем если кто-то реализовывал подобное, буду рад любым ссылкам на статьи, рекомендациям и объяснениям.
  • Вопрос задан
  • 3047 просмотров
Решения вопроса 5
alexey-m-ukolov
@alexey-m-ukolov Куратор тега Веб-разработка
Можно поднять бесплатную версию imgproxy. Единственный затык - у них из облаков Amazon, Google и Microsoft. Но можно вполне накостылить что-то рядом, что будет хранить файлы локально и будет уметь работать с вашей основной системой.
Ответ написан
Комментировать
ThunderCat
@ThunderCat Куратор тега Веб-разработка
{PHP, MySql, HTML, JS, CSS} developer
Вариантов масса, все зависит от кучи неозвученных нюансов, давайте опишу первые 3 приходящие в голову:
1) Хранить готовые изображения разного размера, ключ для которых в таблице будет один, а по факту, в зависимости от гет параметров тащится нужного размера, сопоставленное по ключу и размеру.
То есть табличка имеет вид : [id] | key | size | real_aws_key , через софт бэкенда тянете картинку с сервера хранения, отдаете в виде потока.
2) NGINX + модуль, тут вроде нужно будет подергать настройки, и поплясать с бубном, но зато решение практически коробочное. Минус - жрет проц. Можно организовать то же самое, но через софт, тот же imagick например.
3) Хранить превьюшки локально, на облако заливать только большие файлы, по запросу тащить нужные превьюхи из папок, например что-то типа \storage\images\500\[image_id].jpg
Ответ написан
2ord
@2ord
Если нужны готовые решения, то:
https://github.com/Pixboost/transformimgs
https://github.com/thumbor/thumbor
Cloudinary
Ответ написан
Комментировать
Noizefan
@Noizefan
Uploadcare.com делает именно все то, что ты описал
Ответ написан
Комментировать
Можно поднять сервис с этой либой, она умеет делать обрезку, webp/avif, и любые манипуляции вроде блюра, на лету, по гет параметрам от фронтов
https://glide.thephpleague.com/

путь до исходных картинок указывается чрез League\Flysystem\Filesystem, она умеет работать с облачными хранилищами
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы