De uitsnede staat in breuken, niet in pixels

Het vak dat je sleept wordt bewaard als een deel van de afbeelding (x, y, breedte en hoogte tussen 0 en 1) en wordt pas binnen de worker pixels, tegen de decode op volledige resolutie. Dat is het verschil tussen een uitsnede die landt waar je hem neerzet en een die afdrijft. Een cropper die het vak in voorbeeldpixels vastlegt en het op een origineel van 6000px toepast zit er de voorbeeldschaal naast, en die fout blijft onzichtbaar tot je goed naar de rand kijkt.

Het betekent ook dat het voorbeeld elke maat kan hebben die de lay-out wil. De afbeelding hierboven is geschaald om in je venster te passen; de export wordt op volledige resolutie uit het origineel gesneden, en de pixelafmetingen die je tijdens het slepen ziet zijn de echte uitvoerafmetingen, niet die van het voorbeeld.

Beeldverhoudingen vastzetten is lastiger dan het lijkt

Een uitsnede van 1:1 is in breukcoördinaten geen vierkant. Op een foto van 3:2 bedekt een vak van 0,5 breed en 0,5 hoog 1500 bij 1000 pixels, en dat is 3:2 en geen 1:1. Een verhouding vasthouden betekent rekenen tegen de eigen beeldverhouding van de afbeelding, en daarom leveren vergrendelde verhoudingen in simpele croppers zo vaak uitvoer op die bijna, maar net niet, de vorm is waar je om vroeg.

Aanraken en toetsenbord werken allebei

Een flink deel van het beeldverkeer zit op een telefoon, en een tool die alleen met een muis werkt is daar waardeloos. Het vak en alle vier de hoeken gebruiken pointer events met capture, dus een vinger die het vak voorbijschiet blijft slepen in plaats van het los te laten.

Het zijn ook echte knoppen. Tab naar het vak en de pijltoetsen verplaatsen het; tab naar een hoek en de pijltoetsen wijzigen de maat vanaf die hoek, met de tegenoverliggende hoek op zijn plek. Shift maakt elke stap tien keer groter. Een generator die alleen met slepen te bedienen is sluit iedereen uit die geen muis gebruikt, en dat is geen kleine groep.

Veelvoorkomende problemen

Draaien en spiegelen hebben geen invloed op het opgeslagen bestand. Het zijn hier voorbeeldtransformaties, toegepast met CSS zodat ze niets kosten. De export is het uitgesneden gebied van het origineel.
De uitvoer is kleiner dan verwacht. Uitsnijden haalt pixels weg; het voegt er nooit toe. Een kwart van een foto van 12 megapixel is een foto van 3 megapixel. Heb je het resultaat op een bepaalde maat nodig, verklein het dan daarna.
Een uitgesneden JPEG oogt iets zachter. Uitsnijden via een canvas hercodeert, dus een verliesgevende bron wordt een tweede keer gecomprimeerd. Op de kwaliteit die hier gebruikt wordt is dat gering, en het is niet te vermijden zonder een verliesvrije JPEG-cropper, en die werkt alleen op veelvouden van 8 of 16 pixels.
De metadata is uit de uitsnede verdwenen. Zelfde reden: de uitvoer wordt uit pixels hercodeerd, dus EXIF, GPS inbegrepen, overleeft dat niet. Meestal precies wat je wilt.

Veelgestelde vragen

Wordt de afbeelding geüpload?

Nee. Het voorbeeld is een object-URL die naar het bestand op je apparaat wijst, en de uitsnede draait in een Web Worker in dit tabblad. Er wordt op geen enkel moment iets verstuurd.

Hoe groot hoort een profielfoto te zijn?

Vierkant, en minstens 400px. De meeste platformen tonen hem klein maar bewaren een grotere kopie voor schermen met hoge dichtheid, en een upload die kleiner is dan de weergavegrootte wordt uitvergroot. Snijd hier op 1:1 uit, en verklein daarna als het platform een harde grens heeft.

Kan ik meerdere afbeeldingen tegelijk uitsnijden?

Hier niet, en met opzet. Een uitsnede is een beslissing over één bepaalde afbeelding; dezelfde rechthoek op een batch toepassen levert alleen iets bruikbaars op als elke foto identiek gekaderd is. Voor batchwerk met één gedeelde instelling neemt de verkleiner meerdere bestanden tegelijk.

Vermindert uitsnijden de beeldkwaliteit?

De pixels die je houdt veranderen niet van maat, dus er wordt niets opnieuw geschaald. Een JPEG wordt op de uitgang hercodeerd, en dat kost op de kwaliteit die hier gebruikt wordt een beetje, en alle EXIF inclusief GPS gaat er samen mee weg. Een PNG-uitsnede is verliesvrij.