Skip to content

Filtros de Imagen Online

En el navegador — sin subida
Última verificación mayo 2026 — corre en tu navegador

Filtros de Imagen — 4 Presets Fijos de Curvas RGB per-píxel vía Loop per-píxel de Canvas ImageData

Aplica uno de 4 presets de filtro artístico fijo a cualquier foto vía manipulación per-píxel de Canvas ImageData. Los presets son: Vintage (R × 1,1 + 20, G × 0,9 + 10, B × 0,8 — desplazado cálido con azul reducido), Noir (luma BT.601 `Y = 0,299R + 0,587G + 0,114B` → umbral alto contraste en 128: Y > 128 mapea a Y × 1,2, Y ≤ 128 mapea a Y × 0,8 — produce grises alto contraste), Cálido (R + 15, G + 5, B − 10 — desplazamiento de canales hacia naranja-rojo), Frío (R − 10, G + 5, B + 20 — desplazamiento de canales hacia azul). Cada filtro es una sola pasada de Canvas ImageData que ejecuta `for (i = 0; i < data.length; i += 4) { ... }` sobre el buffer Uint8ClampedArray, aplicando la aritmética per-canal con recorte `Math.min(255, ...)` / `Math.max(0, ...)`. Nota: NO es la propiedad CSS `filter` (que compone primitivas blur / brightness / contrast / hue-rotate / sepia / saturate / invert / grayscale en la capa de renderizado) — esta herramienta aplica 4 curvas RGB fijas específicas al buffer de píxeles en tiempo de exportación. La salida preserva el formato origen: PNG → PNG (alfa RGBA preservado); JPG → JPG calidad 0,92 vía canvas.toBlob (cuantización perceptual del Anexo K de ITU-T T.81). Los archivos nunca salen del dispositivo.

Relacionado: Escala de Grises Imagen Sepia Enfocar Imagen Desenfocar Imagen Brillo y Contraste Comprimir Imagen

Cómo aplicar un filtro de imagen

  1. Arrastra una foto a la herramienta o haz clic para seleccionarla. Cualquier formato ráster común que el navegador decodifique nativamente funciona (JPG, PNG, WebP, AVIF).
  2. Recorre los 4 botones preset. La vista previa se actualiza inmediatamente a cada clic — Vintage (cálido desvanecido), Noir (blanco-y-negro alto contraste), Cálido (desplazamiento naranja), Frío (desplazamiento azul).
  3. Elige el filtro que case con el ambiente que quieres. Cada preset aplica aritmética per-canal fija — sin deslizador de intensidad en la implementación actual.
  4. Descarga la copia filtrada. El formato de salida preserva el origen (PNG → PNG con alfa, JPG → JPG calidad 0,92).
  5. Para más control (intensidad, brillo, contraste, saturación), usa una herramienta de gradación de color dedicada. Para apilados artísticos más finos, capa varias pasadas manualmente — descarga una salida filtrada y vuelve a subir para aplicar un segundo preset encima.

Casos de uso comunes

  • Dar a un lote de fotos de vacaciones o viaje un look coherente antes de publicarlas como álbum coherente en Instagram, Twitter/X, o un blog.
  • Añadir dramatismo a retratos vía el preset Noir para un blanco-y-negro editorial alto contraste sin ajuste manual de curvas.
  • Calentar fotos de día nublado vía el preset Cálido para que resulten más acogedoras en un blog, web de viajes, o ficha de producto.
  • Enfriar tomas diurnas vía el preset Frío para señalar un ambiente invernal, nocturno o atmosférico en creatividades y miniaturas de marketing.
  • Producir una vista previa de un solo look para un mood board de gradación de color antes de comprometerte con un flujo de corrección de color más detallado en una herramienta dedicada.

Preguntas frecuentes

¿Es esto la propiedad CSS `filter`?

No. CSS `filter` compone primitivas blur / brightness / contrast / hue-rotate / sepia / saturate / invert / drop-shadow / grayscale en la etapa de composición de capa de renderizado según WHATWG html.spec.whatwg.org. Esta herramienta aplica 4 curvas RGB fijas específicas directamente al buffer de píxeles en tiempo de exportación vía manipulación de Canvas ImageData — el resultado se hornea en los bytes de la imagen descargada, no se aplica en tiempo de visualización. Para efectos estilo CSS-filter en capa de renderizado, usa la propiedad CSS `filter` en el elemento HTML origen antes de exportar vía una librería html-to-image.

¿Puedo ajustar la intensidad del filtro?

No — la implementación actual aplica cada preset a una intensidad fija sin control deslizador. Para efectos de intensidad parcial, puedes encadenar la salida con una pasada adicional en un editor de imagen (carga la salida filtrada, mezcla con el original a opacidad reducida). Las 4 funciones preset son aritmética fija; modificar la intensidad requeriría editar los multiplicadores y offsets per-canal en el código fuente del componente.

¿Puedo apilar varios filtros?

No en una sola pasada — pero puedes descargar una imagen filtrada y pasarla de nuevo por la herramienta con un preset distinto para superponer estilos. Cada pasada es una transformación nueva, así que los resultados pueden suavizarse ligeramente con guardados JPG repetidos (la recodificación canvas.toBlob aplica cuantización perceptual del Anexo K de ITU-T T.81 a calidad 0,92 cada pasada, acumulando ~1-2% pérdida por round-trip). Para apilado sin pérdidas, usa orígenes PNG.

¿El filtro cambia las dimensiones de la imagen?

No. El loop ImageData per-píxel modifica los valores RGB pero no las dimensiones del canvas — la salida es bit-exacta píxel-a-píxel con las dimensiones origen. El tamaño del archivo puede cambiar ligeramente porque distintas distribuciones de color comprimen de forma distinta (p. ej. la salida casi-grises del preset Noir comprime ~10-20% más pequeño para PNG vía redundancia DEFLATE).

¿Se suben mis imágenes?

No. La cadena decodificar + ctx.getImageData + función preset per-píxel + ctx.putImageData + canvas.toBlob corre toda del lado cliente vía WHATWG Canvas. La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.

4 presets fijos de curvas RGB + manipulación per-píxel de Canvas ImageData

La herramienta aplica uno de 4 presets fijos de curvas RGB per-píxel vía manipulación de Canvas ImageData. Cada preset es una pequeña función JavaScript que itera el Uint8ClampedArray devuelto por `ctx.getImageData()` en paso-4 (R, G, B, A por píxel) y aplica la aritmética per-canal con recorte. Los cuatro presets: Vintage — `R = min(255, R × 1,1 + 20); G = min(255, G × 0,9 + 10); B = min(255, B × 0,8)` — aumenta el rojo, reduce ligeramente el verde, reduce significativamente el azul, produciendo un look desvanecido cálido reminiscente de impresiones Kodachrome envejecidas. Noir — primero computa `Y = 0,299R + 0,587G + 0,114B` (la luma ITU-R BT.601 según el estándar cluster 15 OI grayscale-image), después aplica un umbral de alto contraste: `Y > 128 → min(255, Y × 1,2)`, `Y ≤ 128 → Y × 0,8`, escribiendo el resultado a los tres canales R/G/B — produce un look blanco-y-negro de alto contraste con sombras aplastadas y luces elevadas. Cálido — `R += 15; G += 5; B -= 10` (con recorte a [0, 255]) — desplaza los canales de toda la imagen hacia naranja-rojo sin modificar la forma de la curva per-canal. Frío — `R -= 10; G += 5; B += 20` (con recorte) — desplaza hacia azul. Nota crítica — esta herramienta NO es la propiedad CSS `filter` (que compone primitivas blur, brightness, contrast, hue-rotate, sepia, saturate, invert, drop-shadow, y grayscale en la etapa de composición de capa de renderizado según html.spec.whatwg.org). Esta herramienta aplica 4 curvas RGB fijas específicas al buffer de píxeles real en tiempo de exportación vía manipulación de Canvas ImageData. Las transformaciones per-canal aquí NO son derivadas de spec (no hay receta estándar de industria para 'vintage' o 'frío'); son constantes afinadas a mano casando con estéticas de filtro de redes sociales comunes. Para control más fino sobre brillo, contraste, saturación, matiz o saturación, usa una herramienta de gradación de color dedicada (o encadena primitivas CSS `filter` en el elemento HTML antes de exportar vía html-to-image o similar). La salida preserva el formato origen: orígenes PNG se quedan PNG con alfa RGBA; orígenes JPG producen JPG a calidad 0,92 vía canvas.toBlob (cuantización perceptual del Anexo K de ITU-T T.81, aproximadamente 1-2% pérdida adicional perceptualmente invisible respecto al origen).

  • Cuatro presets fijos de curvas RGB per-píxel: Vintage (R × 1,1 + 20, G × 0,9 + 10, B × 0,8) + Noir (luma BT.601 + umbral alto contraste en 128) + Cálido (R + 15, G + 5, B − 10) + Frío (R − 10, G + 5, B + 20)
  • Manipulación per-píxel de Canvas ImageData vía WHATWG ctx.getImageData + for-loop sobre Uint8ClampedArray + ctx.putImageData
  • NO es la propiedad CSS `filter` — estas son curvas RGB fijas aplicadas al buffer de píxeles en tiempo de exportación, no primitivas de composición de capa de renderizado
  • Constantes de aritmética de canal afinadas a mano (no hay receta estándar de industria para 'vintage' / 'noir' / 'cálido' / 'frío' — son estéticas de filtro de redes sociales comunes)
  • Alterna entre los 4 presets vía botones de pestaña; la vista previa se actualiza inmediatamente al clic
  • Preserva el formato origen: PNG → PNG con alfa RGBA; JPG → JPG calidad 0,92 (Anexo K de ITU-T T.81)
  • En el navegador vía WHATWG Canvas ImageData + aritmética per-píxel + canvas.toBlob — sin subida
  • Opera en sRGB (IEC 61966-2-1:1999); las imágenes origen sin perfil ICC embebido se interpretan como sRGB

Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).

Fuentes (9)
  • International Telecommunication Union (ITU-R, formerly CCIR) (1982). ITU-R BT.601 — Luma formula underlying the Noir preset. itu.int/rec/R-REC-BT.601 — the Noir preset first computes `Y = 0.299R + 0.587G + 0.114B` per BT.601 (cluster 15 OI grayscale standard), then applies a high-contrast threshold at 128: Y > 128 → Y × 1.2; Y ≤ 128 → Y × 0.8. The BT.601 coefficients derive from the NTSC YIQ colour encoding (FCC docket 9019, ratified 17 December 1953) and were codified by the CCIR in BT.601 in 1982.
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: getImageData(). html.spec.whatwg.org/#dom-context-2d-getimagedata — returns ImageData with Uint8ClampedArray of (R, G, B, A) bytes per pixel; each of the 4 preset functions iterates this array in stride-4 applying its hardcoded per-channel arithmetic.
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: putImageData(). html.spec.whatwg.org/#dom-context-2d-putimagedata — writes the modified Uint8ClampedArray back to the canvas after the preset transform.
  • WHATWG (live). HTML Living Standard — CSS filter property (NOT used by this tool). html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-filter + drafts.fxtf.org/filter-effects-1 — the CSS `filter` property composes blur / brightness / contrast / hue-rotate / sepia / saturate / invert / drop-shadow / grayscale primitives at the render-layer compositing stage. This tool does NOT use CSS filter — it applies 4 hardcoded RGB curves to the pixel buffer at export time via Canvas ImageData.
  • WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point.
  • WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob(). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes canvas pixel buffer to Blob.
  • ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; Annex K quantisation tables.
  • W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — PNG output format.
  • International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in.

Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.

Patrocinado

Por ·