Redimensionador d'imatges de franc

Com funciona

El redimensionament passa completament al teu navegador utilitzant l'API Canvas — el mateix motor de renderització integrat a Chrome, Firefox i Safari. La teva imatge es dibuixa en un canvas fora de pantalla a les noves dimensions i es torna a codificar localment; res surt del teu dispositiu.

1. 1
   La imatge la descodifica el navegador

   Quan deixes anar o selecciones un fitxer, el navegador descodifica la imatge (JPEG, PNG, WebP, AVIF o GIF) a dades de píxels en brut via un HTMLImageElement. Les dimensions originals de píxels es llegeixen i s'utilitzen per emplenar prèviament els camps d'amplada i alçada.
2. 2
   Canvas torna a dibuixar a la mida nova

   Fer clic a Redimensiona estableix un HTMLCanvasElement fora de pantalla a l'amplada i alçada que hagis triat, i després crida ctx.drawImage() per escalar i pintar cada píxel a les noves dimensions. Per a la sortida JPEG, primer s'aplica un ompliment de fons blanc perquè les regions transparents no esdevinguin negres.
3. 3
   canvas.toBlob() codifica la sortida

   El mètode integrat canvas.toBlob() del navegador codifica les dades de píxels a JPEG, PNG o WebP al nivell de qualitat que estableixis. Si has especificat una mida de fitxer objectiu, una cerca binària de 7 iteracions ajusta automàticament el paràmetre de qualitat fins que la sortida encaixi en aquella mida o per sota.
4. 4
   El resultat es previsualitza i es descarrega localment

   El Blob codificat es converteix en un URL d'objecte per al panell de previsualització — sense anada i tornada al servidor. Fer clic a descarregar dispara un desament local amb un nom de fitxer que inclou les dimensions finals de píxels.

Eines relacionades