Redimensionador de imaxes de balde

Como funciona

O redimensionamento ocorre enteiramente no teu navegador usando a API Canvas — o mesmo motor de renderización incorporado en Chrome, Firefox e Safari. A túa imaxe debúxase nun lenzo fóra de pantalla ás novas dimensións e recodifícase localmente; nada sae do teu dispositivo.

1. 1
   A imaxe decodifícase polo navegador

   Cando soltas ou seleccionas un ficheiro, o navegador decodifica a imaxe (JPEG, PNG, WebP, AVIF ou GIF) en datos de píxeles en bruto mediante un HTMLImageElement. As dimensións de píxel orixinais lense e úsanse para prepoboar os campos de ancho e alto.
2. 2
   Canvas redebuxa ao novo tamaño

   Facer clic en Redimensionar establece un HTMLCanvasElement fóra de pantalla ao ancho e alto escollidos, e despois chama a ctx.drawImage() para escalar e pintar cada píxel nas novas dimensións. Para a saída JPEG, aplícase primeiro un recheo de fondo branco para que as rexións transparentes non se convertan en negro.
3. 3
   canvas.toBlob() codifica a saída

   O método canvas.toBlob() integrado do navegador codifica os datos de píxeles a JPEG, PNG ou WebP no nivel de calidade que estableces. Se especificaches un tamaño de ficheiro obxectivo, unha busca binaria de 7 iteracións axusta automaticamente o parámetro de calidade ata que a saída se axuste a ese tamaño ou por debaixo del.
4. 4
   Resultado previsualizado e descargado localmente

   O Blob codificado convértese nun URL de obxecto para o panel de vista previa — sen viaxe de ida e volta ao servidor. Facer clic en descargar activa un gardado local cun nome de ficheiro que inclúe as dimensións finais de píxel.

Ferramentas relacionadas