Images et photos · Éditeur d'images et de dessins du navigateur
Comment fonctionne le recadrage dans un éditeur d'images de navigateur : canevas et pixels
· Comment ça marche
retouche d'images toile traitement du navigateur
Le recadrage semble trivial, mais un éditeur de navigateur doit décoder le fichier, copier un rectangle de pixels sur un canevas et encoder un tout nouveau fichier. Cet article passe en revue chaque étape et explique ce qui change et ce qui reste identique.
Pourquoi une photo recadrée est un nouveau fichier, pas un ancien découpé : le recadrage ne peut pas simplement supprimer des octets d'un fichier JPEG ou PNG, donc l'éditeur décode et réencode
Un JPEG stocke les données d'image compressées, et non une étendue d'octets supprimable indépendamment par ligne visible. Couper des octets à sa fin corromptrait le fichier et non couperait une photo. Un éditeur de navigateur décode donc l'image, sélectionne un rectangle et crée un nouveau fichier codé. L'original reste sur votre disque. Si vous avez besoin d'une édition réversible, conservez la source et les coordonnées de sélection : le recadrage exporté ne contient pas les pixels manquants.
Décoder l'image en bitmap - comment le navigateur transforme les octets compressés en une grille largeur × hauteur de pixels RGBA avant que quoi que ce soit puisse être sélectionné
Le navigateur transforme le JPEG, PNG ou WebP compressé en un bitmap avec des échantillons largeur × hauteur. Une image 4000×3000 représente douze millions de pixels avant tout recadrage, et plusieurs octets par pixel peuvent rendre son empreinte en mémoire beaucoup plus grande que celle du fichier sur le disque. ToolAcre vérifie les limites des images et des canevas avant d'attribuer de très grands espaces de travail. Ce que vous voyez à l'écran peut être agrandi pour s'adapter à la fenêtre d'affichage ; le rectangle de recadrage doit toujours être mappé aux coordonnées de l'image avant que les pixels ne soient copiés.
Sélection d'un rectangle : coordonnées source et destination - comment drawImage copie une région choisie sur un canevas de la taille cible et ce que signifie l'arrondi aux pixels entiers
Un rectangle est une origine (x, y) plus une largeur et une hauteur, mesurées en pixels source. ToolAcre contraint ce rectangle aux limites du document et recadre chaque calque visible, pas seulement une capture d'écran de l'aperçu composite. Pour chaque calque, il crée un canevas cible et appelle drawImage avec neuf arguments : canevas source, rectangle source, origine de destination et taille de destination. Avec des dimensions source et destination égales, les pixels sont sélectionnés sans étape de redimensionnement. Les positions du pointeur fractionnaire sont arrondies ou limitées à des pixels de canevas représentables.
Encodage du résultat dans un fichier : pourquoi l'étape d'exportation décide du format et de la qualité, et pourquoi le recadrage lui-même est exact alors que l'encodage peut ne pas l'être.
L'exportation est une opération distincte de la récolte. Le canevas édité peut être codé au format PNG, JPEG ou WebP selon les options et la prise en charge du navigateur. PNG peut conserver les pixels fournis à son encodeur sans perte ; JPEG supprime certains détails même si le rectangle a été sélectionné exactement, et la transparence nécessite un arrière-plan délibéré lors de l'utilisation d'un format sans alpha. Le nouveau fichier peut également omettre les métadonnées sources ou les informations sur les couleurs. Ne le décrivez donc jamais comme un sous-ensemble octet par octet de l'original.
Exemple concret : recadrer une photo 4000×3000 en une bannière 1600×900 — en suivant le nombre de pixels via le décodage, la copie et l'exportation
Pour un blogueur avec une photo 4000×3000, une bannière 1600×900 centrée commence à x=1200 et y=1050. drawImage copie les colonnes 1200 à 2799 et les lignes 1050 à 1949 vers une sortie 1600×900 : 1.44 millions de pixels au lieu de douze millions. Si vous demandez à la place à l'éditeur de réduire la photo complète à 1600×900, vous modifiez son rapport hauteur/largeur et rééchantillonnez plutôt que de procéder à ce recadrage. Sur un téléphone à mémoire limitée, l'éditeur peut d'abord réduire une entrée très volumineuse, alors vérifiez les dimensions affichées avant de répéter ces coordonnées.
Ce qu'une culture exportée ne peut pas récupérer de l'image originale
Il ne s’agit pas d’un recadrage de blocs JPEG sans perte : l’application dessine des pixels et exporte un nouveau conteneur. Le fichier 1600×900 exporté ne peut pas non plus récupérer les marges supprimées après la fermeture de l'original. Un document d'édition en couches est encore différent : le recadrage agit sur les couches du document, tandis que l'exportation les compose dans l'image téléchargée. Pour les documents sensibles, il est plus sûr de recadrer une marge que de simplement dessiner une superposition opaque, mais inspectez les pixels exportés et gardez l'original privé.
À retenir : pixels exacts, nouveau conteneur – pourquoi un recadrage du navigateur est précis et comment l'éditeur d'images et de dessins du navigateur l'exécute sans télécharger le fichier
Un recadrage du navigateur précise les pixels décodés à conserver, tandis que l'encodeur choisi contrôle le fichier téléchargé. L'éditeur d'images et de dessins du navigateur effectue les deux étapes sur votre appareil : charger une image, sélectionner un rectangle, appliquer le recadrage et exporter. Le réseau n'a pas besoin des octets de photos pour aucune des deux étapes, mais les actifs du site et les demandes AdSense/analytics divulguées ne doivent pas être confondus avec un téléchargement de fichier dans DevTools.