Différences

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

Voir les différences : Côte à côteSur une seule ligne Go

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente 2024/01/25 10:08 norore supprimée2020/02/11 12:39 norore [Rendu HTML] 2020/02/07 10:41 norore [PHP] 2020/02/07 10:39 norore [Rendu HTML] 2020/02/07 10:35 norore [Requis] 2019/01/11 12:58 norore crééeGo Prochaine révision		Révision précédente 2024/01/25 10:08 norore supprimée2020/02/11 12:39 norore [Rendu HTML] 2020/02/07 10:41 norore [PHP] 2020/02/07 10:39 norore [Rendu HTML] 2020/02/07 10:35 norore [Requis] 2019/01/11 12:58 norore crééeGo
dev_web:recadrer_photo [2020/02/07 10:41] – [PHP] norore		dev_web:recadrer_photo [2024/01/25 10:08] (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>
-	==== 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>