• Записи 1593
  • Теги 111
  • Комментарии 3530

Лог жизни

Доделал поддержку картинок на сайте

Сегодня сделал ещё шаг к сайту мечты — добавил вставку изображений в произвольное место сообщения, и сделал это для всех пользователей, у кого есть права на загрузку файлов (прежде эта возможность была только у меня при написании новых сообщений в блог, а остальные могли только загружать прикреплённые файлы, которые выводятся в конце сообщения). Сделал так, чтобы файлы изначально вставлялись в uri:data в base64, а уже после отправки на сервер сохранялись отдельно — это даёт возможность писать сообщение полностью в оффлайне. Раньше картинки грузились на сервер отдельными запросами сразу после добавления. Но это требует включенного Интернета, что противоречит моей нынешней установке на «хочешь сохранить сфокусированность — включай Интернет только когда без него никак», да и в поездках неудобно (например, когда я ехал в Калининград, написал сообщение в самолёте, но вот чтобы вставить фото, пришлось ждать приземления).

Удивительное дело: когда мне года два или три назад только-только предложили такое решение (я про data:uri), мне оно показалось очень «костыльным». А сейчас, наоборот, понимаю, что это — единственный вариант сделать такую возможность без полной переделки IntB вообще и с поддержкой оффлайн-режима.

Сначала думал, что всё сделаю за день, но дело шло очень тяжело и растянулось почти на пять дней. Лезли разные баги собственно при обработке на сервере (например, забыл про то, что preg_replace_all по умолчанию выдаёт совпадения с кривой группировкой, и чуть было не сломал мозг, пытаясь понять, что идёт не так). Потом много времени ушло на то, чтобы сделать все необходимые проверки на размер и количество файлов как на сервере, так и на клиенте. Причём пришлось делать это для двух редакторов: и для Quill, и для SCeditor, у которых API весьма сильно различаются. Впрочем, тут мне неплохо помогла нейросеть, встроенная в Google-поиск. Меня очень удивило, что она может писать код даже для API таких малоизвестных проектов.

Дальше решил сделать автоматическое уменьшение картинок до нужного размера на стороне клиента, чтобы экономить траффик при отправке на сервер. Кстати, с удивлением узнал, что для этого не нужно никаких тяжёлых сторонних библиотек. Всё делается гораздо проще: изображение кидается на canvas с указанием новых размеров, а затем canvas экспортируется либо в Blob, либо в uri:data. Эх, раньше бы тут же побежал писать заметку в компьютерный раздел в духе «Как уменьшить изображение на стороне клиента», а сейчас понимаю, что смысла в этом никакого всё равно нет: нейронка и сам код напишет, и объяснит, как оно работает, и сделает это гораздо быстрее, чем я.

В общем, если первые два дня от этой доделки я испытывал подъём и воодушевление, то вчера и сегодня они сменились усталостью и реакцией «ну наконец-то с этим покончено». Так что завтра и, возможно, послезавтра сделаю дни отдыха. А потом уже займусь перевёрсткой страницы блога.

А ещё закрались сомнения: правильно ли я вообще делаю, что уменьшаю изображения принудительно? Может быть, найдутся ситуации, когда нужно, наоборот, сохранить оригинальный файл. Хотя для этих сценариев, скорее всего, подойдёт другое решение: отключить уменьшение при загрузке файла старым способом (когда он цепляется как прикреплённый, а не вставляется в текст). Но это — менять сложившееся много версий назад привычное поведение, что тоже нежелательно.

Написать комментарий:

Написать комментарий
Прикрепить файлы: (не более 4 файлов, не более 102400 Кб каждый, 102400 Кб всего)