Работа с картинками

С незапамятных времён на bezumkin.ru нельзя было загружать картинки, даже когда такая возможность появилась в дополнении MODX Tickets, на котором сайт был построен.

Но теперь, в связи с полным перезапуском проекта, я обновил и работу с картинками. Вы можете загружать их кнопочкой в редакторе или сразу бросать пачкой в текст.

Выглядит это вот так (нажмите на картинку для запуска GIFки):

А дальше я расскажу, как это работает.

Обработка старых картинок

Картинки могут быть только в заметках и комментариях, так что для работы с ними я создал один общий Trait. Указал его для моделей Topic и Comment, а дальше можно вызывать новые методы в контроллерах, или работать с ними напрямую из консоли.

Проблема, которую я хотел решить - это возможная потеря картинок, вставленных в заметки с чужих сайтов. Эти сайты могут быть временнно недоступны, или закрыты насовсем. Или, в конце-концов, они могут вместо старой картинки подсунуть что-то новое, нехорошее.

Поэтому один из методов проверяет все ссылки на картинки с чужих сайтов, выкачивает их и заменяет на короткую запись вида image/uuid, которую при выводе содержимого я могу поменять на реальный адрес https://bezumkin.ru/api/image/uuid.

UUID используется для того, чтобы загруженные картинки нельзя было перебрать, как это можно делать с инткрементируемыми ID.

При загрузке чужих файлов используется UUID версии 5, который генерирует одну и ту же строку в зависимости от адреса файла, чтобы не грузить одно и то же несколько раз. А вот при загрузке новых изображении из редактора используется UUID 4,он генерирует полностью случайную строку.

Для работы c UUID рекомендую ramsey/uuid. Кому интересно - вот сам код загрузки

$replace = [];

preg_match_all('#!\[.*?]\((http.*?)\)#i', $content, $images);
// Перебираем массив картинок из текста
foreach ($images[1] as $uri) {
    // Идентификатор генерируем из адреса ссылки 
    $uuid = Uuid::uuid5(Uuid::NAMESPACE_URL, $uri);

    // Если такой адрес уже был - обновим, если нет - создадим новый файл
    if (!$file = File::query()->find($uuid)) {
        $file = new File();
        $file->id = $uuid;
    }

    // Качаем картинку
    if ($data = @file_get_contents($uri)) {
        // Сохраняем данные во временный файл
        $tmp = tempnam(getenv('CACHE_DIR'), 'download_');
        file_put_contents($tmp, $data);

        // Проверяем MIME, вдруг это и не картинка вовсе?
        if (($mime = mime_content_type($tmp)) && strpos($mime, 'image/') === 0) {
            // Всё ок, загружаем данные в хранилище
            $file->uploadFile('data:' . $mime . ';base64,' . base64_encode($data));
            // Сохраняем в массив для замены
            $replace[$uri] = $uuid;
            unlink($tmp);
        } else {
            unlink($tmp);
            throw new RuntimeException('Wrong file type: ' . $uri);
        }
    } else {
        throw new RuntimeException('Filed to download file: ' . $uri);
    }
}

// Теперь меняем старые ссылки на новые
if (!empty($replace)) {
    foreach ($replace as $from => $to) {
        $content = str_replace($from, 'image/' . $to, $content);
    }
}

У меня этот код чуть сложнее, для наглядности я убрал всё лишнее.

Загрузка новых картинок

Новые картинки нам ниоткуда скачивать не нужно, тут всё делается на стороне пользователя.

Благодаря тому, что у меня используется свой собственный редактор, я легко добавил ему новое действие при клике на кнопку добавления картинки:

onImageClick() {
  const input = document.createElement('input')
  input.type = 'file'
  input.multiple = true
  input.accept = 'image/*'
  input.onchange = (e) => {
    this.onAddFiles({dataTransfer: {files: e.target.files}})
  }
  input.click()
},

Сама загрузка происходит в следующем методе:

onAddFiles({dataTransfer}) {
  const files = Array.from(dataTransfer.files)
  files.forEach((file) => {
    // Работаем только с картинками
    if (file.type.includes('image/')) {
      const reader = new FileReader()
      // Задаём функцию обработки файла, когда браузер его прочитает
      reader.onload = async () => {
        // Отправляем данные на сервер
        const {data: res} = await this.$axios.post('upload', {
          file: reader.result,
          metadata: {name: file.name, size: file.size, type: file.type}
        })
        // И вставляем в текст тег с полученным в ответ UUID
        this.$refs.editor.insertText(`\n![](image/${res.id})\n`)
      }
      // Запускаем чтение файла
      reader.readAsDataURL(file)
    }
  })
},

Обратите внимание, что файл браузером читается асинхронно. То есть, при выборе файла никто не ждёт, пока он загрузится полностью, и браузер не останавливает для этого все процессы.

Наоборот, задаётся функция, которая будет запущена по прочтению всего файла, и она отправит его на сервер, и вставит в редактор тег с картинкой.

Дальше уже моя функция перевода Markdown в HTML подставит для короткой ссылки реальный адрес на сервере.

Drag and drop использует эту же функцию для загрузки файлов. В Vue это делается очень просто:

<form @drop.prevent="onAddFiles" @dragover.prevent @submit.prevent="onSubmit">
...
</form>

Осталось только написать контроллер загрузки файлов:

<?php

namespace App\Controllers;

use App\Models\File;
use Psr\Http\Message\ResponseInterface;
use Ramsey\Uuid\Uuid;
use Vesp\Controllers\Controller;

class Upload extends Controller
{
    protected $scope = 'profile';

    public function post(): ResponseInterface
    {
        if ($file = $this->getProperty('file')) {
            $object = new File();
            $object->id = Uuid::uuid4();
            $object->user_id = $this->user->id;
            $object->uploadFile($file, $this->getProperty('metadata'));

            return $this->success($object->only(['id', 'width', 'height']));
        }

        return $this->failure('errors.upload.no_file');
    }
}

Файл прилетает в кодировке base64, которую файлы Vesp понимают по умолчанию.

Контроль целостности БД

Пока пишется заметка можно накидать много файлов, а потом их убрать и не использовать. Такие файлы, конечно же, на сервере не нужны. Хотелось бы их как-то чистить.

Для этого я просто ставлю вновь созданным файлам флаг temporary, который снимается при сохранении заметки с его UUID.

А что делать, если юзер отредактирует заметку и уберёт ссылку на файл? Для контроля подобных случаем я создал 2 новые модели: TopicFile и CommentFile, в которые просто пишутся id соответствующей модели и файла.

Затем при сохранении модели мы проверяем какие файлы к ней относятся, и если их нет в содержимом, то удаляем эту запись из БД, а соответствующему ей файлу снова ставим флаг temporary.

public function getFileIds(): array
{
    if (preg_match_all('#image/(\w{8}-\w{4}-\w{4}-\w{4}-\w{12})#', $this->content, $matches)) {
        return array_unique($matches[1]);
    }

    return [];
}

public function deleteLocalFiles(): void
{
    // Если у модели есть привязанные файлы
    if ($files = $this->files()->get()) {
        $ids = $this->getFileIds(); // То смотрим, какие есть ссылки в контента

        // Перебираем привязанное и проверяем, есть ли оно в контенте
        /** @var TopicFile|CommentFile $file */
        foreach ($files as $file) {
            // Если файла нет, то
            if (!in_array($file->file_id, $ids, true)) {
                // Удаляем привязку
                $file->delete();
                // И ставим на удаление загруженный файл
                $file->file->temporary = true;
                $file->file->save();
            }
        }
    }
}

Остаётся только добавить в crontab команду на удаление temporary файлов раз в неделю.

Заключение

Таким образом bezumkin.ru, наконец-то, хранит файлы сам у себя. Ничего не потеряется, данные ни от кого постороннего не зависят. А вам, мои дорогие читатели, должно быть гораздо удобнее теперь добавлять картинки в комментариях.

По ходу написания этой заметки выяснилось, что библиотека thephpleague/glide, которая используется в Vesp для вывода изображений, калечит анимированные GIFки.

Поэтому я дописал специальную обработку для таких файлов в контроллере, и если запрос приходит без параметров для конвертации, то GIFка отдаётся как есть, с анимацией. Именно так и работает превьюшка в начале заметки - статичная картинка с ограничением по ширине до 850px, является ссылкой на полную немодифицированную, с анимацией.

Если вы используете vesp/core, то можно обновляться на версию 2.6.0

← Предыдущая заметка
Подробности про новый сайт
Следующая заметка →
Аватарки на сайте
Комментарии (0)
born2slip
pishnaa istntome
22.11.2022 14:06
огромное спасибо! )
inetlover
Александр Наумов
14.11.2022 10:19
посмотри документацию. Спасибо, что-то она мне не нагуглилась. Это просто функции объединения для о...
bezumkin
Василий Наумкин
10.11.2022 05:46
Спасибо за поздравления!
inetlover
Александр Наумов
09.11.2022 17:08
Посмотрел в ДевТулсе свойство overscroll-behavior: none; присутствует, проверил в Chrome и Chromium ...
bezumkin
Василий Наумкин
03.11.2022 20:57
Поискать в исходниках ссылки на её адрес и поменять - скорее всего только nuxt.config.js. А зачем эт...
ni.kolokol@mail.ru
Николай Каленников
03.11.2022 19:43
Спасибо. Попробую тоже с нуля переставить
inetlover
Александр Наумов
03.11.2022 19:24
Спасибо!!! Все заработало!
bezumkin
Василий Наумкин
28.10.2022 05:23
В тексте есть подсказка // Контроллер требует новое разрешение protected $scope = &#x27;ord...
bezumkin
Василий Наумкин
27.10.2022 13:25
Понял, спасибо!
inetlover
Александр Наумов
23.10.2022 13:33
Понял, спасибо!