Lire les données EXIF pour faire pivoter les images qui ont une clé d'orientation définie

Le module EXIF Orientation corrige l’orientation après l’upload d’une image.

Sur un projet de web app Drupal, les utilisateurs ont la possibilité de modifier l’image de leur profil. J'utilise le champ natif user_picture. Pour permettre aux utilisateurs d’envoyer leur photo, j’ai créé un formulaire avec la Form Api (custom form). En effet, je devais également faire des traitements sur l'image et notamment l’envoyer encodé en Base64 à un web services. 

Tout fonctionnait bien sauf un problème d'orientation de l'image. En effet, les utilisateurs sur mobile prennent une photo en mode portrait mais en front, l'image est affichée en mode paysage. Après des recherches, j’ai vu qu’il existait un propriété CSS pour afficher l’image avec la bonne orientation mais elle est mal supportée par les navigateurs. Il existe également des solutions JS ou des traitements côté serveur.

Finalement, comme c’est souvent le cas sur Drupal, un module existe et fait parfaitement le travail. Il corrige l’orientation après l’upload d’une image. Ce module ne nécessite aucune configuration.

Installation :

composer require 'drupal/exif_orientation:^1.1'


Exemple de formulaire custom :

 $form['photos'] = array(
            '#type' => 'managed_file',
            '#title' => 'Photos',
            '#description' => 'types de fichier autorisés : jpg jpeg png',
            '#description_display' => 'before',
            '#upload_validators' => $validators,
            '#upload_location' => 'public://photos-clients',
            '#multiple' => false,
            '#required' => TRUE,
        );

 

Ajouter un commentaire

HTML restreint

  • Balises HTML autorisées : <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Les adresses de pages web et les adresses courriel se transforment en liens automatiquement.

Contact_

Une idée de projet, une recherche de conseil, une mission intégration ou développement ? N’hésitez pas à me contacter.