Différences

Ci-dessous, les différences entre deux révisions de la page.

--- codes_sources_en_vrac:dev_web:recadrer_photo [2024/01/25 10:09] – créée norore
+++ codes_sources_en_vrac:dev_web:recadrer_photo [2026/02/11 12:44] (Version actuelle) – supprimée norore
@@ Ligne 1: / Ligne 1: @@
-====== Uploader une photo recadrée à la volée ======
-===== Requis =====
-  * [[https://github.com/foliotek/croppie|Croppie.js]]
-  * PHP
-  * HTML
-  * CSS
-===== Qu'est-ce qui est appris ? =====
-Jouer avec base64.
-===== Code source =====
-==== Javascript ====
-<code javascript>
-$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});
-                        });
-});
-</code>
-==== Rendu HTML ====
-<code html>
-{{ 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>
-</code>
-Avant le </body> :
-<code html>
-<script type="text/javascript" src="{{ asset('bundles/scolaritebiologie/js/ajustement_photo.js') }}"></script>
-</code>
-==== PHP ====
-=== Formulaire ===
-<code php>
-<?php
-namespace Scolarite\BiologieBundle\Form;
-use Symfony\Component\OptionsResolver\OptionsResolver;
-use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\FormBuilderInterface;
-use Symfony\Component\Form\Extension\Core\Type\FileType;
-class PhotoEtudiantType extends AbstractType
-{
-	/**
-	 * {@inheritdoc}
-	 */
-	public function buildForm(FormBuilderInterface $builder, array $options)
-	{
-		$builder->add('photo', FileType::class, array(
-				'data_class' => null,
-				'label' => 'label.photo.etudiant',
-				'attr' => array(
-					'class' => 'uploadPhoto',
-					'accept' => 'image/*',
-				)
-			));
-	}
-	/**
-	 * {@inheritdoc}
-	 */
-	public function configureOptions(OptionsResolver $resolver)
-	{
-		$resolver->setDefaults(array(
-			'data_class' => 'Scolarite\BiologieBundle\Entity\Individus',
-		));
-	}
-	/**
-	 * {@inheritdoc}
-	 */
-	public function getBlockPrefix()
-	{
-		return 'scolarite_biologiebundle_photoetudiant';
-	}
-}
-</code>
-=== Controller ===
-<code php>
-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");
-		}
-	}
-}
-</code>