Procesamiento De Imágenes

Este artículo ofrece algunos casos de uso para mostrar cómo cambiar el tamaño, recortar, ajustar, rellenar y alinear imágenes.

Cambiar el tamaño de las imágenes

Usamos la consulta URL de la imagen para cambiar el tamaño de las imágenes. Por ejemplo:

Especificar el ancho y conservar la proporción

1![Resize](featured-sample.webp?width=300px)

Especifique la altura y mantenga la proporción

1![Resize](featured-sample.webp?height=200px)

Especifique el ancho y el alto.

1![Resize](featured-sample.webp?width=300px&height=200px)

Puede usarse no solo para recursos de la página, sino también para imágenes estáticas e imágenes externas. Sin embargo, además de los recursos de la página, a otros se les cambia el tamaño mediante el estilo en línea, es decir, su tamaño original no cambiará.

Alinear imágenes

Podemos alinear imágenes fácilmente agregando fragmentos de URL. Como #center, #float-start y #float-end representan el centro de alineación, el inicio flotante y el final flotante respectivamente.

Centro

Agregar el fragmento #center para alinear las imágenes al centro.

Por ejemplo: @@P2@@.

Inicio flotante

Por ejemplo.

1{{/% clearfix %/}}
2![Float Start](/featured-sample.webp#float-start) TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}

Extremo flotante

Por ejemplo.

1{{/% clearfix %/}}
2![Float End](/featured-sample.webp#float-end) TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}

Título

HBS permite usar el título de la imagen como título, esta función está deshabilitada de forma predeterminada, debe habilitar el parámetro post.imageTitleAsCaption:

1['publicación']
2  imageTitleAsCaption = 'verdadero'

1publicación:
2  imageTitleAsCaption: verdadero

1{
2   "publicación": {
3      "imageTitleAsCaption": "verdadero"
4   }
5}

1![Image Caption](/featured-sample.webp "Use Image Title as Caption")

Recortar imágenes

Recorta una imagen para que coincida con las dimensiones dadas sin cambiar el tamaño. Debes proporcionar tanto el ancho como el alto. Utilice la opción ancla¹ para cambiar el punto de ancla del cuadro de recorte.

1![Crop Image](/featured-sample.webp?crop=[width]x[height],[anchor])

• Se requiere el tamaño [width]x[height].
• [anchor] es opcional, el , se utiliza para separar el tamaño y el anclaje.

Ejemplos

Rellenar imágenes

Recorta y cambia el tamaño de una imagen para que coincida con las dimensiones dadas. Debes proporcionar tanto el ancho como el alto. Utilice la opción ancla¹ para cambiar el punto de ancla del cuadro de recorte.

1![Fill Image](/featured-sample.webp?fill=[width]x[height],[anchor])

• Se requiere el tamaño [width]x[height].
• [anchor] es opcional, el , se utiliza para separar el tamaño y el anclaje.

Ejemplos

Ajustar imágenes

Reduzca la escala de una imagen para que se ajuste a las dimensiones dadas manteniendo la relación de aspecto. Debes proporcionar tanto el ancho como el alto.

1![Fit Image](/featured-sample.webp?fit=[width]x[height])

Filtros

Brillo

El brightness debe estar en el rango (-100, 100).

1![Image Brightness](/featured-sample.webp?brightness=-30)

Equilibrio de color

ColorBalance crea un filtro que cambia el equilibrio de color de una imagen. Los parámetros porcentuales para cada canal de color (rojo, verde, azul) deben estar en el rango (-100, 500).

1![Image ColorBalance](/featured-sample.webp?colorBalance=-50,50,150)

colorear

Colorizar crea un filtro que produce una versión coloreada de una imagen. El parámetro de tono es el ángulo de la rueda de colores, normalmente en el rango (0, 360). El parámetro de saturación debe estar en el rango (0, 100). El parámetro de porcentaje especifica la fuerza del efecto, debe estar en el rango (0, 100).

1![Image Colorize](/featured-sample.webp?colorize=-100,50,150)

Contraste

El contrast debe estar en el rango (-100, 100).

1![Image Contrast](/featured-sample.webp?contrast=50)

gama

Gamma crea un filtro que realiza una corrección gamma en una imagen. El parámetro gamma debe ser positivo. Gamma = 1 da la imagen original. Un gamma inferior a 1 oscurece la imagen y un gamma superior a 1 la aclara.

1![Image Gamma](/featured-sample.webp?gamma=2)

Desenfoque gaussiano

Aplica un desenfoque gaussiano a una imagen.

1![Image GaussianBlur](/featured-sample.webp?gaussianBlur=2)

Escala de grises

Escala de grises crea un filtro que produce una versión en escala de grises de una imagen.

1![Image Grayscale](/featured-sample.webp?grayscale)

Tono

Hue crea un filtro que rota el tono de una imagen. El cambio de ángulo de tono suele estar en el rango de -180 a 180.

1![Image Hue](/featured-sample.webp?hue=90)

Invertir

Invertir crea un filtro que niega los colores de una imagen.

1![Image Invert](/featured-sample.webp?invert)

Pixelar

Pixelar crea un filtro que aplica un efecto de pixelación a una imagen.

1![Image Pixelate](/featured-sample.webp?pixelate=8)

Saturación

La saturación crea un filtro que cambia la saturación de una imagen.

1![Image Saturation](/featured-sample.webp?saturation=100)

Sepia

Sepia crea un filtro que produce una versión en tonos sepia de una imagen.

1![Image Sepia](/featured-sample.webp?sepia=200)

sigmoideo

Sigmoid crea un filtro que cambia el contraste de una imagen usando una función sigmoidea y devuelve la imagen ajustada. Es un cambio de contraste no lineal útil para ajustes fotográficos, ya que conserva los detalles de luces y sombras.

1![Image Sigmoid](/featured-sample.webp?sigmoid=2,5)

Máscara de enfoque

UnsharpMask crea un filtro que enfoca una imagen. El parámetro sigma se utiliza en una función gaussiana y afecta el radio de efecto. Sigma debe ser positivo. El radio de afilado equivale aproximadamente a 3 * sigma. El parámetro cantidad controla cuánto más oscuros y cuánto más claros se vuelven los bordes del borde. Normalmente entre 0.5 y 1.5. El parámetro de umbral controla el cambio mínimo de brillo que se agudizará. Normalmente entre 0 y 0.05.

1![Image UnsharpMask](/featured-sample.webp?unsharpMask=10,1,0.05)