Простой графический редактор на Fabric.js и PHP

Создание простого редактора этикеток с использованием Fabric.js для фронтенда и PHP для бэкенда включает несколько этапов. Ниже приведен пример реализации.

1. Структура проекта

/label-editor
  /index.html       # Фронтенд (редактор на Fabric.js)
  /save.php         # Бэкенд (сохранение этикетки)
  /uploads          # Папка для сохранения изображений

2. Фронтенд (index.html)

Этот файл содержит редактор на Fabric.js, где пользователь может добавлять текст, изображения и сохранять результат.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Label Editor</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
  <style>
    canvas {
      border: 1px solid #000;
    }
    .toolbar {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <button onclick="addText()">Добавить текст</button>
    <input type="file" id="imageUpload" accept="image/*" onchange="addImage(event)">
    <button onclick="saveLabel()">Сохранить этикетку</button>
  </div>
  <canvas id="canvas" width="800" height="600"></canvas>

  <script>
    // Инициализация canvas
    const canvas = new fabric.Canvas('canvas', {
      backgroundColor: '#fff',
    });

    // Добавление текста
    function addText() {
      const text = new fabric.Text('Новый текст', {
        left: 100,
        top: 100,
        fontSize: 30,
        fill: '#000',
      });
      canvas.add(text);
    }

    // Добавление изображения
    function addImage(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function (e) {
        fabric.Image.fromURL(e.target.result, function (img) {
          img.scale(0.5).set({ left: 50, top: 50 });
          canvas.add(img);
        });
      };
      reader.readAsDataURL(file);
    }

    // Сохранение этикетки
    function saveLabel() {
      const dataURL = canvas.toDataURL({
        format: 'png',
        quality: 1,
      });

      // Отправка данных на сервер
      fetch('save.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ image: dataURL }),
      })
        .then((response) => response.json())
        .then((data) => {
          alert(data.message);
          if (data.url) {
            window.open(data.url, '_blank');
          }
        })
        .catch((error) => {
          console.error('Ошибка:', error);
        });
    }
  </script>
</body>
</html>

3. Бэкенд (save.php)

Этот файл принимает изображение в формате base64, сохраняет его на сервере и возвращает ссылку на скачивание.

<?php
header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);
    $imageData = $data['image'];

    // Проверка и обработка данных
    if (strpos($imageData, 'data:image/png;base64') === 0) {
        $imageData = str_replace('data:image/png;base64,', '', $imageData);
        $imageData = str_replace(' ', '+', $imageData);
        $imageBinary = base64_decode($imageData);

        // Сохранение изображения
        $fileName = 'label_' . time() . '.png';
        $filePath = 'uploads/' . $fileName;

        if (file_put_contents($filePath, $imageBinary)) {
            echo json_encode([
                'message' => 'Этикетка успешно сохранена!',
                'url' => $filePath,
            ]);
        } else {
            echo json_encode([
                'message' => 'Ошибка при сохранении файла.',
            ]);
        }
    } else {
        echo json_encode([
            'message' => 'Некорректный формат изображения.',
        ]);
    }
} else {
    echo json_encode([
        'message' => 'Недопустимый метод запроса.',
    ]);
}
?>

4. Как это работает

Пользователь открывает index.html в браузере.
Добавляет текст или изображение на canvas с помощью кнопок.
Нажимает «Сохранить этикетку», и изображение отправляется на сервер в формате base64.
Сервер (save.php) декодирует base64, сохраняет изображение в папку uploads и возвращает ссылку на файл.
Пользователь получает сообщение об успешном сохранении и может открыть или скачать изображение.

5. Запуск проекта

Убедитесь, что у вас установлен веб-сервер (например, Apache или Nginx) и PHP.
Поместите файлы в корневую директорию сервера.
Откройте index.html в браузере.

Этот пример является базовым и может быть расширен (например, добавлением поддержки слоев, экспорта в PDF, авторизации пользователей и т.д.).