Bilder und Fotos · Browser-Bild- und Zeichnungseditor
So funktioniert das Zuschneiden in einem Browser-Bildeditor: Leinwand und Pixel
· Wie es funktioniert
Bildbearbeitung Leinwand Browser-Verarbeitung
Das Zuschneiden sieht trivial aus, aber ein Browser-Editor muss die Datei dekodieren, ein Rechteck aus Pixeln auf eine Leinwand kopieren und eine brandneue Datei kodieren. Dieser Beitrag geht jeden Schritt durch und erklärt, was sich ändert und was gleich bleibt.
Warum es sich bei einem zugeschnittenen Foto um eine neue Datei und nicht um eine zugeschnittene alte Datei handelt – beim Zuschneiden können nicht einfach Bytes aus einem JPEG oder PNG gelöscht werden, daher dekodiert der Editor und kodiert sie neu
Ein JPEG speichert komprimierte Bilddaten und nicht einen unabhängig löschbaren Bytebereich pro sichtbarer Zeile. Das Abschneiden von Bytes am Ende würde die Datei beschädigen und nicht das Abschneiden eines Fotos. Dazu dekodiert ein Browser-Editor das Bild, wählt ein Rechteck aus und erstellt eine neue kodierte Datei. Das Original verbleibt auf Ihrer Festplatte. Wenn Sie eine umkehrbare Bearbeitung benötigen, behalten Sie die Quelle und die Auswahlkoordinaten bei: Der exportierte Ausschnitt enthält die fehlenden Pixel nicht.
Dekodierung des Bildes in eine Bitmap – wie der Browser komprimierte Bytes in ein Breite-×-Höhe-Raster aus RGBA-Pixeln umwandelt, bevor etwas ausgewählt werden kann
Der Browser wandelt das komprimierte JPEG, PNG oder WebP in eine Bitmap mit Breiten-×-Höhen-Abtastungen um. Ein 4000×3000-Bild stellt vor dem Zuschneiden zwölf Millionen Pixel dar, und mehrere Bytes pro Pixel können dazu führen, dass sein Speicherbedarf viel größer ist als der der Datei auf der Festplatte. ToolAcre prüft die Bild- und Leinwandgrenzen, bevor sehr große Arbeitsbereiche zugewiesen werden. Was Sie auf dem Bildschirm sehen, kann gezoomt werden, um es an das Ansichtsfenster anzupassen. Das Zuschneiderechteck muss noch den Bildkoordinaten zugeordnet werden, bevor Pixel kopiert werden.
Auswahl eines Rechtecks: Quell- und Zielkoordinaten – wie drawImage einen ausgewählten Bereich auf eine Leinwand der Zielgröße kopiert und was das Runden auf ganze Pixel bedeutet
Ein Rechteck ist ein Ursprung (x,y) plus Breite und Höhe, gemessen in Quellpixeln. ToolAcre beschränkt dieses Rechteck auf die Dokumentgrenzen und schneidet jede sichtbare Ebene zu, nicht nur einen Screenshot der zusammengesetzten Vorschau. Für jede Ebene wird ein Ziel-Canvas erstellt und drawImage mit neun Argumenten aufgerufen: Quell-Canvas, Quellrechteck, Zielursprung und Zielgröße. Bei gleichen Quell- und Zielabmessungen werden Pixel ohne Größenänderungsschritt ausgewählt. Gebrochene Zeigerpositionen werden auf darstellbare Leinwandpixel gerundet oder begrenzt.
Das Ergebnis zurück in eine Datei kodieren – warum der Exportschritt über Format und Qualität entscheidet und warum der Zuschnitt selbst exakt ist, die Kodierung jedoch möglicherweise nicht
Der Export ist ein vom Zuschneiden getrennter Vorgang. Die bearbeitete Leinwand kann je nach Optionen und Browserunterstützung als PNG, JPEG oder WebP kodiert werden. PNG kann die an seinen verlustfreien Encoder gelieferten Pixel beibehalten; Bei JPEG gehen einige Details verloren, selbst wenn das Rechteck genau ausgewählt wurde, und Transparenz benötigt bei Verwendung eines Formats ohne Alpha einen bewussten Hintergrund. In der neuen Datei können auch Quellmetadaten oder Farbinformationen weggelassen werden. Beschreiben Sie sie daher niemals als Byte-für-Byte-Teilmenge des Originals.
Arbeitsbeispiel: Zuschneiden eines 4000×3000-Fotos zu einem 1600×900-Banner – Verfolgung der Pixelanzahl durch Dekodierung, Kopieren und Exportieren
Für einen Blogger mit einem 4000×3000-Foto beginnt ein zentriertes 1600×900-Banner bei x=1200 und y=1050. drawImage kopiert die Spalten 1200 bis 2799 und die Zeilen 1050 bis 1949 in eine 1600×900-Ausgabe: 1.44 Millionen Pixel statt zwölf Millionen. Wenn Sie stattdessen den Editor bitten, das gesamte Foto auf 1600 x 900 zu verkleinern, ändern Sie das Seitenverhältnis und führen ein Resampling durch, anstatt diesen Zuschnitt vorzunehmen. Auf einem Telefon mit begrenztem Speicher reduziert der Editor möglicherweise zunächst eine sehr große Eingabe. Überprüfen Sie daher die angezeigten Abmessungen, bevor Sie diese Koordinaten wiederholen.
Was ein exportierter Ausschnitt nicht vom Originalbild wiederherstellen kann
Dies ist kein verlustfreies Zuschneiden von JPEG-Blöcken: Die Anwendung zeichnet Pixel und exportiert einen neuen Container. Auch die exportierten 1600×900-Dateien können die verworfenen Ränder nicht wiederherstellen, nachdem Sie das Original geschlossen haben. Bei einem mehrschichtigen Bearbeitungsdokument ist das wiederum anders: Das Zuschneiden wirkt sich auf die Dokumentebenen aus, während der Export sie in das heruntergeladene Bild einfügt. Bei sensiblem Material ist das Herausschneiden eines Randes sicherer als das bloße Zeichnen einer undurchsichtigen Überlagerung. Überprüfen Sie jedoch die exportierten Pixel und behalten Sie das Original im Auge.
Fazit: Genaue Pixel, neuer Container – warum ein Browser-Zuschnitt präzise ist und wie der Browser Image & Drawing Editor ihn ausführt, ohne die Datei hochzuladen
Ein Browser-Zuschnitt legt genau fest, welche dekodierten Pixel beibehalten werden sollen, während der ausgewählte Encoder die heruntergeladene Datei steuert. Der Browser Image & Drawing Editor führt beide Schritte auf Ihrem Gerät aus: Laden Sie ein Bild, wählen Sie ein Rechteck aus, wenden Sie den Zuschnitt an und exportieren Sie. Das Netzwerk benötigt die Fotobytes für keinen der Schritte, aber Site-Assets und die offengelegten AdSense-/Analyseanfragen sollten nicht mit einem Datei-Upload in DevTools verwechselt werden.