Recadrage des images

Version imprimable

Bonsoir à tous

Je suis en train de finir de créer une fonctionnalité pour le site internet que je gère.
Je souhaite donner la possibilité, à mes rédacteurs de recadrer une ou plusieurs photos présents directement dans leur dossier de travail (sur le serveur).
Pour cela, j'ai intégré cropperjs pour recadrer la photo en partant de la photo originale. Une fois le recadrage d'effectuer, j'ajoute un bouton "Sauvegarde" dont le but serait de sauvegarder la photo recadrer.
J'arrive à afficher l'image "cropper" mais impossible de l'enregistrer dans mon dossier de destination.
Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
buttonsave.addEventListener('click', function(event) {
                event.preventDefault();
                var crop = cropper.getCroppedCanvas();
                result.innerHTML = '';
                result.appendChild(crop);
                crop.toBlob(function(blob) {
                    var formData = new FormData();
                    formData.append("croppedImage", blob);
                    let response = fetch(document.location.pathname, {
                       method: 'POST',
                       headers: {
                          'X-Requested-With': 'XMLHttpRequest',
                          'X-CSRF-TOKEN': document.head.querySelector('[name=csrf-token]').content,
                       },
                       body: formData
                    }).then(response => {
                        console.log('ok');
                    });
                }, type, 1);
            });
</script>

Cependant, je n'arrive pas à traiter l’enregistrement de l'image recadrée. Voici mon code actuel d'enregistrement:

Code:

1
2
3
4
5
6
7
<?php
public function saverecadrage(Request $request, $id, $main_img, $dimension) {
            $imageData = $request->file('croppedImage');
            $folderPath = public_path('uploadrecadrer/');
           Image::make($imageData)->save($folderPath . uniqid() . '.jpg');
    }
?>

Vous serais-t-il possible de m'aider?

Merci à vous tous par avance.
lemirandais

13/12/2021, 16h32
grunk

Passer par l'api Canvas#toBlob n'est à mon avis pas la bonne solution. En faisant ca tu laisse le navigateur gérer la compression à sa guise , ce qui veux dire que tu vas potentiellement te retrouver avec des images très dégradée.
Idéalement il faut plutôt renvoyer les information de crop (x,y, largeur , hauteur) et cropper l'image coté php avec imagecrop par exemple.

Sinon il ne me semble pas que tu puisse utiliser un blob directement. Il faut le convertir en fichier via l'api file soit transférer un base64 de l'image avec toDataURL()

Bonsoir et merci pour ta réponse.

Donc, j'ai modifié mon code comme ci-dessous:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
buttonsave.addEventListener('click', function(event) {
                event.preventDefault();
                var crop = cropper.getCroppedCanvas();
                result.innerHTML = '';
                result.appendChild(crop);
                file = crop.toDataURL(type);
                var formData = new FormData();
                formData.append("croppedImage", file);
                let response = fetch(document.location.pathname, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.head.querySelector('[name=csrf-token]').content,
                    },
                    body: formData
                }).then(response => {
                    console.log('ok');
                });
            });

J'ai fait quelques tests et niquel, pas de soucis, cela m'enregistre l'image comme il faut.
Merci beaucoup.