Craft the perfect image

Crop Photos with Cropper.js

Let your users crop images with Cropper.js then grab the final image from PHP. Simple.

 

src/Controller/CroppingController.php

#[Route('/cropperjs')]
public function cropper(CropperInterface $cropper, Request $request)
{
    $imagePath = $this->getParameter('kernel.project_dir').'/public/uploads/some_file.png';
    $crop = $cropper->createCrop($imagePath);

    $form = $this->createFormBuilder(['crop' => $crop])
        ->add('crop', CropperType::class, [
            'public_url' => '/uploads/some_file.png',
        ])->getForm();

    $form->handleRequest($request);
    if ($form->isSubmitted() && $form->isValid()) {
        // save cropped image contents to a file
        $cropped = $crop->getCroppedImage();
        $croppedThumbnail = $crop->getCroppedThumbnail(200, 150);
    }

    // ... render template
}

templates/cropping/cropper.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    {{ form_start(form) }}
        {{ form_widget(form) }}

        <button type="submit">Crop it!</button>
    {{ form_end(form) }}
{% endblock %}
Symfony logo

UX Cropper.js

Install It

$ composer require ux symfony/ux-cropperjs
$ npm install --force
$ npm run watch