Cambiar el tamaño de la imagen en Python con opencv

logo python

En este pequeño post enseñaré como cambiar el tamaño de una imagen en Python con opencv. Python es un lenguaje que resulta útil, para llevar a cabo muchas tareas necesarias, incluido el tratamiento de imágenes, que pueden exigir diferentes niveles de complejidad.

Consideremos primero que una  imagen es un array, que puede ser tratado como un objeto numpy.

El método resize() de Python no es efectivo en este caso, ya que no tiene en cuenta el eje, y debido a esto no es capaz de extrapolar y/o interpolar.

El módulo opencv se usa en Python para  la visión por computadora  y el procesamiento de imágenes.

El procedimiento en esencia es leer primero la imagen empleando la función imread(), y luego cambiar su dimensión empleando función resize().

La sintaxis seria así:

dst = cv2.resize(src, dsize[, fx[, fy[, interpolation]]]])

Donde fx y fy son factores de escala a lo largo de los ejes x e y, dsize() se refiere al tamaño de la imagen de salida y el indicador de interpolación se refiere al método que vamos a usar.

Ya sea que se especifique (fx, fy) o dsize, OpenCV calcula el otro automáticamente.

Lo primero es disponer de opencv en el ordenador, para ello deberás descargarla y tenerla ya instalada. Puedes seguir las instrucciones acá .

import cv2
import numpy as np
img = cv2.imread('archivo.jpeg')
res = cv2.resize(img, dsize=(54,140),interpolation=cv2.INTER_CUBIC)

Podemos emplear como interpolación las siguientes:

Nearest Neighbor:

near_img = cv2.resize(img,None, fx = 10, fy = 10, interpolation = cv2.INTER_NEAREST)

la bilineal,

bilinear_img = cv2.resize(img,None, fx = 10, fy = 10, interpolation = cv2.INTER_LINEAR)

o la bicúbica que teníamos en el ejemplo inicial

bicubic_img = cv2.resize(img,None, fx = 10, fy = 10, interpolation = cv2.INTER_CUBIC)

Todas emplean algoritmos diferentes, y su efectividad varía de un caso a otro.

Y hasta aquí, esto es todo.

Espero que esto sirva de ayuda a alguien.

La ignorancia, es la muerte de los vivos

Insertar una imagen responsive

Una cuestión muy importante en CSS, sobre todo en tiempos de mobile-first, es poder insertar una imagen responsive, capaz de verse bien en cualquier dispositivo, y esto adquiere mayor importancia cuando son imágenes de fondo.

Para hacerlo de modo exitoso es necesaria la propiedad background-size de CSS, la cual asimila  el valor cover, que es el encargado de decir escale el alto y ancho de la imagen de forma automática y proporcional de acuerdo a la ventana de visualización o viewport de que se trate.

Por supuesto que varia según el tamaño de la pantalla, si para pantallas grandes tipo PC, o televisiones,  una imagen con un tamaño de 5500x3600px es lo más adecuado, sin embargo no es lo recomendable para dispositivos más pequeños, como móviles, por tanto la opción de usar dos imágenes según el tamaño del display es útil y fácil de conseguir.

El uso de una imagen para una para dispositivos móviles y otra para equipos de más  alta resolución,  es una practica que ayuda mucho, teniendo en cuenta que queremos evitar que la imagen se pixele cuando se agrande, para cubrir el tamaño de la ventana del navegador, de lo que se trata es de hallar el tamaño adecuado, según nuestras necesidades

Para escribir la propiedad en el css, recordando que css es una hoja de cascada, por tanto las ordenes llevan un orden dado, nuestro código debería ser aproximadamente este:

// indicamos la ubicación de la imagen  

background-image: url(images/background-picture.jpg);

//centramos la imagen vertical y horizontalmente */

background-position: center center;

//evitamos que el navegador repita la imagen para llenar el espacio */

background-repeat: no-repeat;


//dejamos la imagen fija de modo que no cambie si cambia la ventana del navegador, además, rescalandose  

background-attachment: fixed;


// llamamos a la propiedad cover para indicar que cubrirá todo el ancho 
background-size: cover;

//garantizamos que si hay un error al cargar o demora se muestre un color mientras tanto

background-color: #66999;

este código puedes escribirlo o verlo escrito también en este formato

background: #66999 url(background-photo.jpg) center center cover no-repeat fixed;

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana hombres……