Gratis Afbeeldingsbijsnijder

Hoe het werkt

Bijsnijden gebeurt volledig in je browser met de HTML5 Canvas API — geen upload, geen server. Je sleept direct een selectie op een canvas-element, en als je de uitsnede toepast, leest de ingebouwde 2D-renderingengine van de browser alleen de geselecteerde pixels en codeert die opnieuw naar JPEG, PNG of WebP.

1. 1
   De afbeelding wordt in het geheugen geladen

   Je bestand wordt gelezen met URL.createObjectURL(), die de browser een lokale blob-URL geeft. Een HTMLImageElement decodeert het bestand volledig in het browsertabblad — de bytes van de afbeelding verlaten je apparaat nooit.
2. 2
   Pointer Events sturen de uitsnede

   De Pointer Events API van de browser (die muis, aanraking en pen samenbrengt) volgt het slepen op een canvas-overlay. Buiten de selectie drukken start een nieuwe rechthoek; binnen de selectie drukken verplaatst die; bij de rechteronderhoek drukken wijzigt de grootte. Optionele voorinstellingen voor beeldverhouding (1:1, 16:9, 4:3 enz.) begrenzen de vorm tijdens het slepen.
3. 3
   Canvas tekent het live voorbeeld

   Bij elke wijziging van de uitsnede tekent de Canvas 2D-context de afbeelding opnieuw, legt een donkere laag buiten de selectie, maakt het uitsnedegebied vrij om de originele afbeelding in volle kwaliteit te tonen en legt er een raster volgens de derderegel en een tealkleurige greep voor het formaat overheen.
4. 4
   toBlob() codeert en levert het resultaat

   Als je op Bijsnijden klikt, wordt een nieuw onzichtbaar canvas gemaakt met de exacte afmetingen van de uitsnede. ctx.drawImage() kopieert alleen de geselecteerde rechthoek, en canvas.toBlob() codeert het resultaat met de native JPEG-, PNG- of WebP-encoder van de browser op de gekozen kwaliteit. De uitvoer wordt als lokale blob-URL teruggegeven om te downloaden.

Gerelateerde tools