Atom Blog

Mostrando las entradas con la etiqueta images. Mostrar todas las entradas
Mostrando las entradas con la etiqueta images. Mostrar todas las entradas

Como Utilizar Imagenes en Matlab


En este nuevo post veremos algunas cosas muy utiles al momento que necesitemos trabajar con imagenes en matlab, aprenderemos como leer imagenes desde la computadora, como mostrarlas en un axes y como escribirlas (guardar) en la computadora.

Una imagen en blanco/negro en matlab es representada por una matriz de dimensiones nxm, donde "n" representan las filas y "m" las columnas.
Para representar una imagen a color en matlab se necesitaran 3 matrices representando los colores basicos.

Para leer una imagen desde la computadora aplicamos la siguiente sentencia:

ruta = 'C:\Users\Rafa\Desktop\imagen1.jpg';
A=imread(ruta);

La variable "A" guardara la matriz de datos de la imagen. Para poder representar la imagen leida en una ventana utilizamos la siguiente sentencia:

imshow(A);

Para obtener el tamano de la imagen utilizamos:

size(A);

lo que representa que existen 3 matrices para cada uno de los colores basicos y el tamamo 375x600.

Podemos aplicar la sentencia siguiente para obtener informacion detallada de la imagen leida.

whos A;

Se puede observar algunos parametros obtenidos de la imagen leida como su nombre, su tamano, los bytes utilizados para representar la matriz, asi como su clase (clase de imagen) que en este caso es uint8 y sus atributos.

Clases de Imagenes:

char: Para caracteres (2 bytes por elemento).
double: Doble precision, numeros de punto flotante en un rango de -10^308 hasta 10^308 (8 bytes por elemento).
int8: Enteros de 8 bits en el rango [-128, 127] (1 byte por elemento).
int16: Enteros de 16 bits en el rango [-32768, 32767] (2 byte por elemento).
int32: Enteros de 32 bits en el rango [-147483648,2147483647] (4 byte por elemento).
logical: Representada por valores de 0 y 1 (1 byte por elemento).
single: Numero de punto flotante de precision simple, con valores entre [-10^38, 10^38] (4 bytes por elemento).
uint8: Enteros de 8 bits en el rango [0, 255] (1 byte por elemento).
uint16: Enteros de 16 bits en el rango [0, 65535] (2 byte por elemento).
uint32: Enteros de 32 bits en el rango [0, 4294967295] (4 byte por elemento).

Para guardar una imagen en la computadora utilizaremos las siguientes sentencias:

imwrite(f, 'nombre_imagen.jpeg');

Ademas se puede utilizar la sentencia siguiente para definir la calidad de la imagen que vamos a guardar, el valor de "q" varian de 0 a 100 representando la calidad respectivamente.

imwrite(A, 'nombre_imagen.jpeg','quality', q);

Para poder recuperar informacion correspondiente a la imagen que acabamos de guardar aplicamos lo siguiente:

imfinfo nombre_imagen.jpeg;



Existen algunos comandos utilizados para tranformar entre las distintas clases de imagenes, como se  muestra a continuacion:

Nuestra imagen original guardada en A es:
Al aplicar:

 im2bw(A)

se obtiene:



Se tiene otros tipos de transformacion como:

im2uint8(A);

im2uint16(A);

im2double(A);







Como Insertar Imagenes y Crear Menus Horizontales con HTML/CSS



El primer post dedicado al lenguaje HTML es sobre como insertar imagenes que esten alojadas en internet y la creacion de menus horizontales disenados con herramientas de CSS.

Este post en particular muestra el diseno del banner principal y del menu horizontal alojado en este blog.

El codigo consta de 3 partes: la primera es la colocacion del banner principal, seguida de la creacion del menu , para luego agregar ciertas caracteristicas de diseno al menu creado.

Para Insertar la Imagen utilizaremos el codigo siguiente:

<center>
        <div id="carga">
            <img src="http://drive.google.com/uc?export=view&id=0B1kFwZU59fWZYVRKMWUycFlJenM"              bord  ="0" height="197" width="1000" ""/>
        </div>
</center>

Estas lineas se colocan debajo de donde empieza <body>, la direccion de la imagen es insertada justo en medio de las comillas de la seguiente sentencia <img src=" ">. La altura y ancho de la imagen se controlan con "height" y "width".

<center> y </center> son utilizadas para centrar la imagen.

Para la creacion del menu se utilizan las siguientes lineas de codigo, las cuales se colocan abajo del codigo utilizado para insertar la imagen, dentro de la etiqueta <body>.

<div id='cssmenu'>
            <ul>   <!--Define la lista en si--> 
                <li> <a href="http://aflrovvs.blogspot.com/">  Inicio </a> </li>
                <li> <a href="http://aflrovvs.blogspot.com/p/descargas.html"> Descargas </a> </li>
                <li> <a href="http://aflrovvs.blogspot.com/p/sobre-mi.html">  Sobre Mi  </a> </li>
                <li> <a href="http://aflrovvs.blogspot.com/p/contacto.html">  Contacto </a> </li>
            </ul>
</div>

En la primera linea colocamos el nombre de nuestro menu: "cssmenu".
En la segunda linea creamos la lista que contendra cada elemento del meno con la etiqueta "<ul>".
Desde la tercera linea a traves de la etiqueta "<li>" se puede crear cada uno de los elementos del menu, sobre los cuales se colocan su respectivo nombre y su enlace al cual nos dirigiremos al hacer click. En nuestro caso cada uno de los enlaces son paginas creadas previamente en mi blog.

Quedando de la siguiente manera:

Como se observa el menu se crea de una manera simpre y en forma vertical, para convertir el menu a una forma horizontal y con colores y sombras aplicamos las siguientes sentencias:

Estas funciones se colocan entre las etiquetas <style type="text/css"> y  </style> por debajo de <title></title>.
Esta primera funcion pinta del color azul el panel de fondo donde colocaremos el menu, ademas redondea el panel creado pintado de azul.

#cssmenu { width:100%; 
   background-color: #62a8f6; 
   border-top-left-radius:34px; 
   border-top-right-radius:34px; 
   border-bottom-left-radius:34px; 
   border-bottom-right-radius:34px;
}

Esta funcion acompanada de la siguiente colocan la lista de una forma horizontal, ademas colocan las coordenas donde se situara el menu y tamano de paneles que lo contendran.

#cssmenu ul { 
    list-style-type:none; 
    height: 40px; 
    width: 534px; 
    margin: auto; 
    position:relative; 
    display:block; 
}

Esta funcion en la 3 linea coloca el color de cada elemento de menu, el la 4 linea asigna la separacion que mantendran los elementos del menu, en la 5 linea pondremo un borde a cada elemento de menu con su repectivo color y en la ultima linea redondeamos las esquinas de los paneles que contienen a lso elementos de menu.

#cssmenu li a{ 
    float: left; 
    background-color: #d4eaff;
    margin:0px; 
    border:solid 1px #f9f9f9; 
    border-radius:15px; 
 }

Esta funcion es la encargada de crear el efecto de cambiar de color que realiza el menu al colocar el puntero sobre cada uno de los elementos de menu.
En la segunda linea asignamos el color al que cambiara, en nuestro caso sera el azul de fondo.
En la tercera linea asignamos el nivel de redondeado.
En la ultima linea colocamos un borde de color negro.

#cssmenu li a:hover { 
    background-color: #6285f5; 
    border-radius:15px; 
    border:solid 1px #000; 
 }

Esta ultima funcion se encarga de realizar algunas funciones como quitar el subrayado con la linea 5.
Ademas en las lineas 2 y 3 controlamos el largo de los paneles de cada unos de los elementos de menu.
En la linea 4 establecemos el ancho de los paneles que contiene los elementos de menu.

 #cssmenu ul a { 
    padding-right: 32px; 
    padding-left: 32px; 
    display: block; line-height: 40px; 
    text-decoration: none;  
    font-family: Georgia, "Times New Roman", Times, serif, fantasy; 
    font-size: 18px; 
    color: #FC4A04; 
 }

El programa quedara de la siguiente manera:

Para descargar el proyecto completo seguir cualquiera de los enlaces siguientes: