@chesd/rcropper v1.0.1

Установка

npm i @chesd/rcropper

Подключение

import '@chesd/rcropper';

Использование

    <div
        data-width="400" // Ширина
        data-height="300" // Высота
        data-save-original="false" // Сохранять ли оригинал
        data-original-folder="original" // Подпапка куда сохранять оригинал
        data-multi="false" // Загрузка нескольких изображений
        data-multi-input-name="images" // Имя инпута, если сохраняем несколько изображений
        data-input-name="image" // Имя основного инпута если 1 изображений (или 1-е изображение, когда мульти)
        data-input-id="rinput2" // ID основного инпута
        data-upload-url="/plugin/upload" // Путь для скачивания изображений с другого сайта
        data-action="/plugin/add" // Путь для загрузки обрезанного изображения
        data-img-container="#rimages2" // Контейнер для вывода фото
        data-rcropper
    >
    </div>
    // Для существующих изображений
    <div
        data-width="300"
        data-height="300"
        data-entity="App\Entity\User"
        data-save-original="false"
        data-original-folder="original"
        data-multi="true"
        data-multi-input-name="images"
        data-input-name="image"
        data-input-input-id="rinput"
        data-upload-url="/plugin/upload"
        data-action="/plugin/add"
        data-img-container="#rimages"
        data-rcropper
    >
        <div id="rimages">
            <img src="/uploads/image1.jpg">
            <img src="/uploads/image2.jpg">
        </div>
        <input type="hidden" name="image" id="rinput" value="/uploads/image1.jpg">
    </div>

Пример PHP

    // Загрузка изображения по URL
    #[Route('/plugin/upload', name: 'plugin.upload', methods: ['GET', 'POST'])]
    public function uploadImage(): JsonResponse {
        $url = json_decode(file_get_contents('php://input', true));
        try {
            $data = file_get_contents($url);
            $filename = pathinfo($url);
            $base64 = 'data:image/' . $filename['extension'] . ';base64,' . base64_encode($data);
            return $this->json([
                'filename' => $filename['basename'],
                'data' => $base64
            ]);
        } catch(Exception $e) {
            return $this->json(false);
        }
    }
    
    // Загрузка обрезанного изображения
    #[Route('/plugin/add', name: 'plugin.add', methods: ['GET', 'POST'])]
    public function uploadAdd(): JsonResponse {
        $data = json_decode(file_get_contents('php://input', true));

        if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
            return $this->json(['error' => 'Invalid request']);
        }

        if(!$data->image) {
            return $this->json(['error' => 'File upload error']);
        }

        $path = 'uploads/test/';

        if(!is_dir($path)){
            mkdir($path);
        }
        $dest = $path . $data->filename;

        file_put_contents($dest, file_get_contents($data->image));

        $copyResult = file_exists($dest);

        if($data->saveOriginal) {
            $path = $path . $data->originalFolder . '/';
            if(!is_dir($path)){
                mkdir($path);
            }
            file_put_contents($path . $data->filename, file_get_contents($data->originalImage));
            $copyResult = file_exists($path . $data->filename);
            if(!$copyResult){
                unlink($dest);
                return $this->json(['error' => 'Original image upload error']);
            }
        }

        if(!$copyResult) {
            return $this->json(['error' => 'File upload error']);
        }

        return $this->json($dest);
    }