Thumbor Fonctionnement Introduction Thumbor est un service open-source de traitement d'image en temps réel. Il permet de redimensionner, découper, ajuster, et transformer des images de manière dynamique via des requêtes HTTP. Thumbor est particulièrement utile pour les développeurs web et les administrateurs de sites qui ont besoin de manipuler des images sur le serveur de manière flexible et efficace. Fonctionnalités principales Redimensionnement : Redimensionne les images à des dimensions spécifiées. Recadrage : Recadre les images pour mettre en avant une partie spécifique. Transformations : Applique des transformations telles que la rotation, le renversement, et le changement de format (JPEG, PNG, etc.). Filtrage : Applique des filtres pour ajuster la luminosité, le contraste, ajouter des effets comme le flou, et plus encore. Optimisation : Optimise les images pour le web, réduisant ainsi leur taille tout en maintenant la qualité. Sécurité : Intègre des options de sécurité pour contrôler l'accès aux transformations d'image. Exemples de Transformations Redimensionnement Description :  Redimensionne l'image à des dimensions spécifiques. https://proxy.hyundai.media/thumb/? 500x300 /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Redimensionne l'image à 500 pixels de large et 300 pixels de haut. Recadrage Centré Description : Recadre l'image pour qu'elle soit centrée sur une zone de 300x200 pixels. https://proxy.hyundai.media/thumb/? 300x200:600x400 /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Recadre l'image de 300x200 pixels en son centre. Rotation Description :  Tourne l'image de 90 degrés. https://proxy.hyundai.media/thumb/?350x200/ filters:rotate(90) /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Tourne l'image de 90 degrés dans le sens des aiguilles d'une montre. Effet de Flou Description :  Applique un effet de flou sur l'image. https://proxy.hyundai.media/thumb/?350x200/ filters:blur(10) /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Applique un flou de 10 pixels sur l'image. Conversion en Noir et Blanc Description :  Convertit l'image en noir et blanc. https://proxy.hyundai.media/thumb/?350x200/ filters:grayscale() /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Convertit l'image en niveaux de gris, supprimant toutes les couleurs. Ajustement de la Luminosité Description :  Augmente la luminosité de l'image. https://proxy.hyundai.media/thumb/?350x200/ filters:brightness(20) /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Augmente la luminosité de l'image de 20%. Ajout de Bordures Description :  Ajoute une bordure noire autour de l'image. https://proxy.hyundai.media/thumb/?350x200/ filters:frame(5, "black") /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Ajoute une bordure de 5 pixels de large de couleur noire autour de l'image. Miroir Horizontal Description :  Retourne l'image horizontalement. https://proxy.hyundai.media/thumb/?350x200/ filters:flip() /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Retourne l'image de gauche à droite. Miroir Vertical Description :  Retourne l'image verticalement. https://proxy.hyundai.media/thumb/?350x200/ filters:flop() /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Retourne l'image de haut en bas. Format de Sortie JPEG Description :  Convertit l'image au format JPEG. https://proxy.hyundai.media/thumb/?350x200/ filters:format(jpeg) /https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication :  Convertit l'image au format JPEG. Formats pris en charge JPEG https://proxy.hyundai.media/thumb/?350x200/filters:format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Convertit l'image au format JPEG. PNG https://proxy.hyundai.media/thumb/?350x200/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Convertit l'image au format PNG. WebP https://proxy.hyundai.media/thumb/?350x200/filters:format(webp)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Convertit l'image au format WebP. GIF https://proxy.hyundai.media/thumb/?350x200/filters:format(gif)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Convertit l'image au format GIF. AVIF https://proxy.hyundai.media/thumb/?350x200/filters:format(avif)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Convertit l'image au format AVIF. Exemple avec Plusieurs Filtres Thumbor permet d'appliquer plusieurs filtres en les combinant dans l'URL. Voici un exemple où plusieurs filtres sont appliqués : Description : Redimensionne l'image, applique un effet de flou, ajuste la luminosité, et convertit l'image au format JPEG. https://proxy.hyundai.media/thumb/?350x200/filters:blur(5):brightness(10):format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : 350x200 : Redimensionne l'image à 350 pixels de large et 200 pixels de haut. filters:blur(5) : Applique un flou de 5 pixels. filters:brightness(10) : Augmente la luminosité de 10%. filters:format(jpeg) : Convertit l'image au format JPEG. Autres Exemples de Filtres Combinés Recadrage Centré et Conversion en PNG https://proxy.hyundai.media/thumb/?300x200:600x400/filters:format(png)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Recadre l'image de 300x200 pixels en son centre et la convertit au format PNG. Rotation et Noir et Blanc https://proxy.hyundai.media/thumb/?350x200/filters:rotate(90):grayscale()/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Tourne l'image de 90 degrés et la convertit en niveaux de gris. Flip Horizontal et Frame https://proxy.hyundai.media/thumb/?350x200/filters:flip():frame(5,"black")/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : Retourne l'image horizontalement et ajoute une bordure noire de 5 pixels. JPEG avec qualité modifiée https://proxy.hyundai.media/thumb/?350x200/filters:quality(80):format(jpeg)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg  Explication : Redimensionne l'image à 350x200 pixels et ajuste la qualité du JPEG à 80%. Paramètres AVIF dans Thumbor Qualité (quality) : Permet de spécifier la qualité de l'image AVIF. Vitesse (speed) : Contrôle la vitesse de compression. Une valeur plus basse donne une meilleure compression (meilleure qualité mais plus lente), tandis qu'une valeur plus élevée donne une compression plus rapide (moins bonne qualité mais plus rapide). https://proxy.hyundai.media/thumb/?350x200/filters:quality(60):speed(4):format(avif)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : 350x200 : Redimensionne l'image à 350 pixels de large et 200 pixels de haut. filters:quality(60) : Ajuste la qualité de l'image AVIF à 60%. filters:speed(4) : Définit la vitesse de compression à 4 pour l'image AVIF. filters:format(avif) : Convertit l'image au format AVIF. Exemple d'URL pour Ajouter un Watermark Description : Ajoute un watermark à une image, spécifie l'image de watermark, sa position, et son opacité. https://proxy.hyundai.media/thumb/?350x200/filters:watermark(https://example.com/path/to/watermark.png,10,10,50)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication : 350x200 :  Redimensionne l'image à 350 pixels de large et 200 pixels de haut. filters:watermark(URL, X, Y, Alpha) :  Applique un watermark à l'image. URL :  L'URL de l'image à utiliser comme watermark. X : Position horizontale du watermark (en pixels) par rapport au coin supérieur gauche de l'image. Y : Position verticale du watermark (en pixels) par rapport au coin supérieur gauche de l'image. Alpha : Opacité du watermark (0-100, où 0 est totalement transparent et 100 totalement opaque). Filtres Supplémentaires Fill (Remplissage) Description :  Remplit l'image avec une couleur spécifique si elle n'atteint pas les dimensions spécifiées. https://proxy.hyundai.media/thumb/?350x200/filters:fill(white)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication: Remplit l'image avec une couleur blanche pour atteindre les dimensions 350x200 pixels. Round Corner (Coins Arrondis) Description : Applique des coins arrondis à l'image. https://proxy.hyundai.media/thumb/?filters:round_corner(20,20,5)/https://cdn.hyundai.media/l2r/campaign/2024_03/retargeting/bayon/slide_1.jpg Explication: Applique des coins arrondis avec un rayon de 20 pixels, un lissage de 20, et une opacité de 5. Gestion des images issues de NocoDB Le proxy gère également les transformations d'images issues de nocodb https://proxy.hyundai.media/thumb/?fit-in/350x300/filters:fill(002c5f):background_color(002c5f):border(5,white):format(webp):quality(100)/dltemp/DtS-QtG9HKyOFvv7/1720804200000/noco/pt1ltv5xyoreh11/md6xxnbcufy5s3c/cn472ajk23jslj8/s2L4pI30SPEDfKnSr-.png L'url de l'image NocoDB doit obligatoirement commencer par "dltemp/" Proxy Proxy PHP pour Thumbor avec Support de NocoDB Description Ce script PHP sert de proxy pour accéder à Thumbor, tout en téléchargeant et en traitant les images provenant de NocoDB. Il cache également les images pour améliorer les performances et inclut des fonctionnalités de journalisation. Structure du Projet proxy.php : Script principal pour servir les images via Thumbor. config.php : Fichier de configuration contenant les paramètres essentiels. cleanup.php : Script pour nettoyer les fichiers temporaires et le cache. debug.log : Fichier de journalisation des événements du proxy. temp/ : Dossier pour stocker temporairement les images téléchargées. cache/ : Dossier pour stocker les images mises en cache. Explication du Code 1. proxy.php Initialisation : Active les rapports d'erreurs et affiche les erreurs. Charge les dépendances via Composer. Charge la configuration depuis config.php . Initialise le cache. Fonction de Journalisation : log_message écrit les messages de log dans un fichier spécifié si la journalisation est activée dans la configuration. Vérification et Création des Dossiers Temporaire : Vérifie et crée le dossier temporaire s'il n'existe pas. Vérifie si le dossier est accessible en écriture. Fonction de Vérification de Domaine Autorisé : isDomainAllowed vérifie si le domaine d'une URL donnée est autorisé en se basant sur une liste de domaines autorisés. Fonction pour Générer des Noms de Fichier Aléatoires : generateRandomFileName génère un nom de fichier aléatoire pour les fichiers temporaires. Traitement de la Requête : Récupère et analyse les paramètres de la requête. Vérifie si l'URL de l'image est vide ou mal formée. Vérifie si l'URL de l'image est une URL NocoDB ou une URL externe autorisée. Télécharge et traite l'image si elle provient de NocoDB. Construit l'URL Thumbor et récupère l'image transformée. Mise en Cache : Met en cache les images transformées pour améliorer les performances. 2. config.php Ce fichier contient les paramètres de configuration pour le proxy, incluant : Les domaines autorisés. Les URLs de base pour Thumbor et NocoDB. Les chemins pour les dossiers temporaires et de cache. Les options de journalisation. Les types MIME autorisés. Les tailles maximales d'image. 3. cleanup.php Nettoyage des Fichiers Temporaires et de Cache : cleanupOldFiles supprime les fichiers plus anciens qu'une certaine période dans les dossiers temporaires et de cache. Conclusion Ce proxy PHP est conçu pour servir les images via Thumbor tout en téléchargeant et en traitant les images provenant de NocoDB. Il met en cache les images pour des performances optimales et inclut des fonctionnalités de journalisation et de nettoyage pour gérer les fichiers temporaires et de cache.