Images et photos · Redimensionneur d'images sociales
Fonctionnement du redimensionnement des images du navigateur : Canvas, drawImage et rééchantillonnage
· Comment ça marche
redimensionnement d'image toile traitement du navigateur
Un navigateur peut décoder une photo, la dessiner dans une toile à une nouvelle taille et encoder le résultat, le tout sans serveur. Cet article suit ce pipeline, explique où la qualité est gagnée ou perdue et montre pourquoi la seule limite de taille est la mémoire de votre appareil.
Pas de téléchargement, pas de serveur, toujours redimensionné - la question concrète de savoir où se déroule le travail lorsqu'une page réduit une photo de 20 mégapixels
Une photographie peut devenir un portrait 1080 par 1350 sans passer par un serveur de traitement d'image. Social Image Resizer reçoit un fichier du sélecteur de navigateur, valide son type et sa taille MIME et appelle createImageBitmap. Ce bitmap décodé reste la source de chaque sortie sélectionnée, de sorte qu'un objet local peut alimenter plusieurs canevas de formes différentes.
L'aperçu visible n'est pas l'export final caché derrière une requête réseau. Il s'agit d'un rendu de canevas plus petit du même état de cadrage : rapport cible, zoom, décalage, mode d'ajustement et arrière-plan. Exportez les répétitions ultérieures qui s'affichent aux dimensions prédéfinies, codent un Blob et transmettent le Blob aux contrôles de téléchargement de la page.
Le décodage est local, mais cet outil applique également une limite d'entrée 40 MB
Le plan indique que la mémoire de l'appareil est la seule limite pratique, mais le chemin d'entrée fourni a également une limite de fichier 40 MB explicite. JPEG, PNG et WebP sont acceptés ; les autres types sont rejetés avant le décodage. Après cette porte, createImageBitmap demande au navigateur de transformer les octets du fichier compressé en largeur, hauteur et pixels décodés utilisables par Canvas.
Les pixels décodés peuvent occuper beaucoup plus de mémoire que le fichier compressé, et chaque canevas de sortie nécessite sa propre allocation. Le moteur de rendu appelle donc la garde de budget de pixels partagée avant de créer un canevas. Il s'agit d'une deuxième contrainte orientée périphérique, et non d'une autorisation de promettre que chaque fichier inférieur à 40 MB s'adaptera à chaque sortie demandée sur chaque machine.
drawImage met à l'échelle un bitmap complet positionné tandis que les clips du canevas de sortie débordent
ToolAcre ne calcule pas de rectangle de recadrage source et ne transmet pas huit arguments source et destination à drawImage. Il calcule une échelle à partir des dimensions source et cible, positionne l'intégralité du bitmap mis à l'échelle et le dessine sur un canevas dont les bords coupent tout débordement. En mode couverture, cette coupure constitue le recadrage ; en mode Contenir, l'intégralité du bitmap reste visible.
La distinction est importante car recadrer et redimensionner ne sont pas des synonymes. Le redimensionnement modifie les dimensions auxquelles le bitmap est échantillonné. Le recadrage supprime tout ce qui se trouve en dehors du cadre de sortie fini. Un appel drawImage peut participer aux deux effets ici, mais le recadrage est produit par la géométrie du cadre et le découpage plutôt que par la réécriture préalable du fichier source.
Rééchantillonnage sous le capot : paramètres de lissage, ce qu'un indice de "haute qualité" demande au navigateur et pourquoi les résultats diffèrent légèrement d'un navigateur à l'autre.
Avant de dessiner, le moteur de rendu active imageSmoothingEnabled et définit imageSmoothingQuality sur élevé. Il s'agit de contrôles de canevas de navigateur, et non d'une demande de noyau Lanczos, bicubique ou autre nommé. L'implémentation ne peut pas promettre des échantillons identiques sur tous les moteurs, car l'API expose un indice de qualité plutôt que le tableau de coefficients exact du navigateur.
Une comparaison utile maintient la source, les dimensions de sortie et le navigateur fixes, puis inspecte les bords diagonaux, les lignes fines et les textures répétées. Si un autre navigateur diffère légèrement, cela ne signifie pas que le ratio cible a changé. Cela signifie que la même demande géométrique est passée par une implémentation de canevas différente, c'est exactement pourquoi l'article évite les pourcentages de performance ou de qualité inventés.
Encodage de la sortie – transformer le canevas en un fichier image encodé et le proposer au téléchargement
Le canevas d'exportation devient un Blob via OffscreenCanvas.convertToBlob lorsque cette méthode existe, ou HTMLCanvasElement.toBlob dans le cas contraire. L'utilisateur choisit JPEG, PNG ou WebP. Une valeur de qualité est fournie à l'encodeur, bien que PNG n'utilise pas de contrôle de qualité avec perte comme le font JPEG et WebP. Le nombre d'octets résultant est mesuré et non estimé.
Pour plusieurs cibles sélectionnées, l'outil crée chaque Blob en séquence, affiche ses dimensions réelles et sa taille mesurée, et peut regrouper les fichiers déjà encodés dans un ZIP. Le stockage ZIP n’améliore pas ici la compression des images ; le contenu indique que ces formats sont déjà compressés. Les téléchargements individuels et l'archive proviennent tous deux d'octets créés localement.
Cette implémentation effectue le travail d'exportation sur le thread principal, pas dans un Web Worker
Le classeur indique que les travaux lourds s'exécutent généralement dans un Web Worker, mais cette application importe les fonctions de recadrage et de rendu directement dans main.js et y parcourt les cibles. Aucun Worker n'est créé dans le chemin inspecté. La page peut toujours rester utilisable pour des travaux ordinaires, mais la réactivité doit être observée plutôt que attribuée à une architecture absente.
L'isolation du réseau est étayée par deux types de preuves. Les tests de base installent une protection réseau et encadrent chaque préréglage sans tentative, tandis que l'enregistrement du produit marque le traitement local. Une vérification du panneau réseau lors de l'exécution peut ajouter des preuves de déploiement. Il doit distinguer le téléchargement d'images des ressources de page ordinaires ou des analyses divulguées au lieu de prétendre que la page entière ne fait aucune demande.
Ce que cela ne couvre pas : bibliothèques de redimensionnement accélérées par GPU et pipelines d'images côté serveur
Cette route est intentionnellement construite sur les primitives du navigateur plutôt que sur une bibliothèque GPU ou un pipeline multimédia distant. Il n'expose pas de noyau de rééchantillonnage sélectionnable, ne compare pas d'algorithmes alternatifs et ne promet pas de traitement par lots accéléré. Une image source produit plusieurs récoltes ; de nombreux fichiers sources non liés appartiennent à un flux de travail différent.
Ces exclusions maintiennent la promesse testable. Le code prouve la validation des fichiers, le décodage bitmap, le cadrage arithmétique, le dessin sur toile, l'encodage Blob et l'assemblage de téléchargement. Cela ne prouve pas comment une batterie de serveurs redimensionnerait les mêmes pixels ni quel chemin GPU un navigateur peut choisir en interne. Les revendications s'arrêtent aux API Web observables utilisées.
À retenir : votre navigateur dispose déjà d'un redimensionneur intégré : Social Image Resizer le pilote pour vous, en le recadrant et en le mettant à l'échelle selon les proportions de la plate-forme sans télécharger le fichier.
Le navigateur fournit déjà les opérations essentielles, mais les résultats utiles dépendent de la géométrie correcte autour d'elles. Social Image Resizer choisit l'échelle maximale pour la couverture, l'échelle minimale pour le contenu, le mouvement des pinces, prévisualise séparément les conseils de la zone de sécurité et exporte aux dimensions cibles exactes. Cette orchestration transforme une API de dessin de bas niveau en un flux de travail d'actifs sociaux reproductible.
Testez le pipeline avec une image originale plutôt qu'une copie précédemment réduite. Choisissez un outil prédéfini ou un rapport personnalisé actuel, déplacez le sujet, exportez une fois et inspectez les dimensions téléchargées. La preuve est le fichier local que vous recevez et le chemin de code qui l'a créé, et non l'affirmation selon laquelle chaque navigateur utilise un rééchantillonneur caché identique.