Uploader une photo recadrée à la volée

• Croppie.js
• PHP
• HTML
• CSS

Jouer avec base64.

$uploadCrop = $('#prev_photo').croppie({
    enableExif: true,
    viewport: {
        width: 300,
        height: 400
    },
    boundary: {
        width: 400,
        height: 400
    }
});
 
$('#scolarite_biologiebundle_etudiants_individu_photo').on('change', function () {
    var input = $(this)[0];
    if (input.files && input.files[0]) {
        var reader = new FileReader();
 
        reader.onload = function (e) {
                            $uploadCrop.croppie('bind', {
                                url: e.target.result
                            }).then(function(){
                                console.log('jQuery bind complete');
                            });
                        }
        reader.readAsDataURL(input.files[0]);
    }
    else {
        alert("Sorry - you're browser doesn't support the FileReader API");
    }
});
 
$('#scolarite_biologiebundle_photoetudiant_photo').on('change', function () {
    var input = $(this)[0];
    if (input.files && input.files[0]) {
        var reader = new FileReader();
 
        reader.onload = function (e) {
                            $uploadCrop.croppie('bind', {
                                url: e.target.result
                            }).then(function(){
                                console.log('jQuery bind complete');
                            });
                        }
        reader.readAsDataURL(input.files[0]);
    }
    else {
        alert("Sorry - you're browser doesn't support the FileReader API");
    }
});
 
function showResult(result) {
    if (result.src) {
        var img = result.src;
        $('#prep_photo').attr('src', img);
    }
    if (result.blob) {
        var img = result.blob;
        $('#photocoupee').attr('value', img);
    }
}
 
$('#prev_photo').on('update.croppie', function(ev, cropData) {
    $uploadCrop.croppie('result', {
                            type: 'canvas', 
                            size: 'viewport',
                        }).then(function (value) {
                            showResult({src: value});
                        });
});
 
$('#prev_photo').on('update.croppie', function(ev, cropData) {
    $uploadCrop.croppie('result', {
                            type: 'canvas', 
                            size: 'viewport',
                        }).then(function (value) {
                            showResult({blob: value});
                        });
});

{{ form_start(form_etudiant, {'attr': {'class': 'form-horizontal'}}) }}
{{ form_errors(form_etudiant) }}
<div align="center">
	<div class="col-sm-4">
		<div class="preview">
			<img id="photo" src="{{ asset('uploads/photos/' ~ etudiant.individu.photo|e) }}" alt="{{ 'texte.alt.photo.etudiant'|trans({'%nom%': etudiant.individu.nom, '%prenom%': etudiant.individu.prenom}) }}">&nbsp;
			<span></span>
		</div>
		{{ form_widget(form_etudiant.photo) }}
		<div class="center-block text-warning">
			<div id="prev_photo"></div>
			<p align="center">{{ 'p.photo.formulaire'|trans }}</p>
			<img id="prep_photo">
		</div>
		<br>
		<input type="hidden" id="photocoupee" name="photocoupee">
	</div>
</div>
 
<div class="row">
</div>
 
<div align="center">
	<input id="btnLoad" class="btn btn-primary btn-sm" type="submit" value="{{ 'bouton.valider'|trans }}">
	&nbsp;
	<a class="btn btn-warning btn-sm" href="{{ path(
		'scolarite_biologie_view',
		{
			'search': search,
			'rang': rang,
		}
	) }}" title="{{ 'lien.fiche.etudiant'|trans({'%nom%': etudiant.individu.nom, '%prenom%': etudiant.individu.prenom}) }}">
		{{ 'bouton.annuler'|trans }}
	</a>
	{{ form_end(form_etudiant) }}
</div>

if ($request->isMethod('POST') && $form_etudiant->isSubmitted() && $form_etudiant->isValid()) {
	$file = $individu->getPhoto();
	$base64 = $request->request->get('photocoupee');
	list($type, $data) = explode(';', $base64);
	list(, $data)	  = explode(',', $base64);
	$data = base64_decode($data);
 
	if (!preg_match('/image\/.*/', $file->getClientMimeType())) {
		$request->getSession()->getFlashBag()->add('danger', 'Le fichier doit être une image !');
	}
	if (!preg_match('/^data:image\/(\w+);base64,/', $base64)) {
		$request->getSession()->getFlashBag()->add('danger', 'Les données transmises doivent avoir le bon MIME-Type !');
	}
	if (!preg_match('/jpg$/i', $type) and !preg_match('/jpeg$/i', $type) and !preg_match('/png$/i', $type)) {
		$request->getSession()->getFlashBag()->add('danger', 'Le fichier doit être une image JPEG ou PNG !' . $type);
	}
	else {
		try {
			$fileName = md5(uniqid()) . '.' . explode('/', $type)[1];
			file_put_contents($this->getParameter('photos_directory').'/'.$fileName, $data);
			$individu->setPhoto($fileName);
 
			$em = $this->getDoctrine()->getManager();
			$em->persist($individu);
			$em->flush();
 
			$request->getSession()->getFlashBag()->add('success', 'Photo enregistrée.');
 
			return $this->redirectToRoute(
				'scolarite_biologie_view',
				array(
					'nom' => $nom,
					'prenom' => $prenom,
					'numIne' => $numIne,
					'promotion' => $promotion,
					'rang' => $rang,
					'anneeEntree' => $anneeEntree,
					'modeEntree' => $modeEntree,
					'interne' => $interne,
					'statut' => $statut,
					'trie'=> $trie,
					'uid'=> $uid,
					'role'=>$role,
			));
		} catch (Exception $e) {
			$msg  = "L'exception suivante vient d'avoir lieu :<br>";
			$msg .= "<pre>" . $e->getMessage() . "</pre><br>";
			$msg .= "Si l'exception persiste, merci d'en informer les administrateurs.";
 
			$request->getSession()->getFlashBag()->add('warning', $msg);
			$request->getSession()->getFlashBag()->add('alert', "La photo n'a pas pu être enregistrée");
		}
	}
}