1

VISIÓN DE MAQUINA – GUIA Nº1

ADQUISICION DE IMÁGENES MATLAB
USANDO LA INTERFAZ GRÁFICA GUI
Resumen—Estas instrucciones son una guía básica para la
preparación de un trabajo para ser presentado ante la Revista
Argentina de Trabajos Estudiantiles*. Este documento es en si
mismo un ejemplo del formato deseado (inclusive este Resumen) y
puede ser usado como una plantilla.
El Resumen esta limitado a 150 palabras y no debe contener
ecuaciones, figuras, tablas, o referencias. Debe concisamente Figura 1- Barra dirección de espacio de trabajo Matlab.
enunciar que fue hecho, como fue hecho, resultados principales, y
su trascendencia. La función que permite ingresar dichas imágenes al espacio
de trabajo es “imread()” la cual debe ser asignada a una variable
Abstract--Basic guidelines for the preparation of a technical que contendrá los datos digitales de la imagen, acorde a la ruta
work for the Revista Argentina de Trabajos estudiantiles* are establecida.
presented. This document is itself an example of the desired layout Para este caso se hará uso de la Ventana de Comandos
(inclusive of this abstract) and can be used as a template.
“Command Window” para asignar a una variable “a” la lectura
The abstract is limited to 150 words and cannot contain
equations, figures, tables, or references. It should concisely state de la imagen ‘escaladegrisis.png’, recordando que esta debe
what was done, how it was done, principal results, and their encontrarse en el mismo directorio que se ha creado
significance. previamente, de lo contrario Matlab no encontrará dicha imagen
y presentará un error de apertura.
I. INTRODUCCIÓN
Este documento muestra el concepto del procesamiento de
una imagen digital, haciendo una introducción al manejo de la
interfaz grafica de MATLAB (GUIDE), cargando determinadas
imágenes en la interfaz, asignando algunos filtros y
características orientadas al procesamiento de estas.

Objetivo: Comprender el concepto de una imagen digital y

su procesamiento, implementando la interfaz grafica de Figura 2- Función imread en Command Window Matlab.
MATLAB.
Al visualizar la variable asignada podremos ver la imagen
cargada como una matriz, la cual al ingresar el comando “size()”
II. CARGA DE IMÁGENES EN ESCALA DE GRISES EN GUIDE
nos mostrará el tamaño de la imagen, lo cual se puede corroborar
A. Ingreso de archivos de imagen en MATLAB a través de la tanto con el espacio de trabajo “workspace” como con la
Ventana de Comandos. información de imagen de nuestro equipo.
Entre las diferentes herramientas que nos ofrece Matlab a la
hora de realizar procesamiento de imágenes, existe una la cual
nos permite adquirir una imagen desde una ubicación
predeterminada en nuestro equipo. Una de las maneras prácticas
de implementar esta función es ubicar dichas imágenes en el
mismo directorio o ruta en que se ha creado nuestro proyecto, de
este modo basta con escribir dentro de la función el nombre
exacto y la extensión de la imagen. Sin embargo, es importante Figura 3- Workspace Matlab – Tamaño matriz de imagen “a”
tener clara la ruta de nuestro espacio de trabajo, para esto
debemos hacer uso de la barra de dirección y corroborar el
directorio. Se recomienda no hacer uso de espacios o caracteres
especiales en la creación de dicha ruta.

Visión de Máquina. Escuela Colombiana de Ingeniería Julio Garavito.

 2

aún es posible incluir otro tipo de información, como lo puede

hacer por ejemplo el uso del comando “impixelinfo()”, este nos
permite dentro de la ventana emergente de la figura visualizar
información del pixel sobre el cual se encuentra situado el
cursor, dicha información variará acorde al movimiento del
mismo indicándonos la posición del pixel y su valor.

Figura 4- Tamaño de la matriz “a “en Matlab vs Información de la imagen

desde el equipo.

Es interesante notar en la figura 3 que el “workspace” de

Matlab no solo entrega la información del tamaño de la matriz
de la imagen, también informa el tipo de variable utilizada para
su almacenamiento, el cual fue “uint8”. Esto quiere decir, que se
almacena en una variable entera de 8 bits. Este caso particular
se presenta a causa de la misma imagen, pues la misma solo
posee una capa en escala de grises.

Para poder visualizar esta imagen dentro de Matlab, se debe

hacer uso del comando “imshow()” el cual nos permite una vista
previa de la imagen en una ventana emergente dentro del mismo
programa, en caso de ser cerrada debe ejecutarse nuevamente el Figura 6- Implementación de impixelinfo.
comando para lograr ver nuevamente la imagen.
B. Interfaz Gráfica GUI de MATLAB.
Una de las herramientas que ofrece MATLAB es la
posibilidad de realizar interfaces graficas amigables con los
usuarios, las cuales pueden ser implementadas mediante la
interacción del GUIDE con una serie de archivos que genera.
Para dar inicio a la interfaz de usuario es necesario escribir el
comando “guide” en la ventana de comandos, lo cual abrirá una
primera ventana que brinda una serie de opciones para abrir un
proyecto existente, o en este caso crear un proyecto nuevo en
blanco.

Figura 5- Resultado Comando imshow().

La figura es mostrada en un recuadro con una serie de

opciones en su menú principal ubicado en la barra superior de la
misma ventana, sin embargo esta es apenas una de las opciones
que ofrece Matlab desde su ventana de comandos, puesto que Figura 7- Creación de proyecto en blanco mediante interfaz grafica GUIDE.
 3

Una vez iniciado el GUI, creado y vinculado el directorio del

proyecto, se puede hacer uso del panel lateral de opciones que
nos brinda la ventana de figura (.fig) para la creación de la
interfaz grafica. Entre otros elementos para insertar podemos
encontrar diferentes tipos de botones, sliders y tablas entre otras
herramientas útiles para realizar la interfaz.

En este caso se ha ingresado un espacio para imagen y cuatro

botones, los cuales corresponderán a la carga de imágenes y tres Figura 10- Espacio de trabajo (directorio).
procesos que se le realizará a cada imagen.
Los cuatro botones insertados previamente en el editor
grafico tendrán por nombre “Cargar nueva imagen”, “Original”,
“Proceso 1” y “Proceso 2” respectivamente, de este modo
mediante el primer botón será posible garantizar el ingreso al
programa de una imagen ubicada en cualquier ubicación del
equipo y no solo de las que se encuentren dentro del directorio
de trabajo. Para esto es necesario ingresar a las propiedades de
cada botón para asignar nombres a cada uno, a su vez es posible
asignar un “tag” para de este modo identificar dicho botón
dentro del código del archivo (.m).

Figura 8- Ventana para creación de interfaz gráfica.

También es posible visualizar en la ventana principal de

Matlab, exactamente en el editor un archivo .m asociado a la
ventana de figuras, en la cual se agregará un código
correspondiente a cada herramienta grafica agregada de acuerdo
con las necesidades de la aplicación.

Figura 11- Propiedades de botón.

Cada botón ingresado genera una función dentro del archivo

(.m) del editor, esto permite asignarle procesos especiales a cada
uno de ellos y se puede identificar la función de cada uno
mediante el “tag” asignado previamente.

Figura 9- Editor – Funciones por botones y figuras.

Al mismo tiempo en el espacio de trabajo se puede observar

los archivos asociados al proyecto.

Figura 12- Funciones botones ingresados.
Inicialmente se utilizó el comando “imread()” para cargar el
archivo de imagen teniendo en cuenta que la misma debe
encontrarse en el mismo directorio de trabajo, obligando al
usuario a realizar este procedimiento, es por esto que se ha
ingresado un botón al cual se le ha asignado el nombre de
“Cargar imagen” y el tag “carga”, con el fin de ser usado para
buscar la imagen a procesar directamente desde la interfaz,
mediante una serie de comandos. Uno de estos comandos es
“uigetfile” el cual permite incorporar el explorador de archivos
y configurar la apertura de un archivo en cualquier ubicación del
equipo, eliminando la necesidad de almacenar las imágenes en
el mismo directorio de trabajo, entregándonos el nombre del
archivo y su ruta dentro del equipo.
Haciendo uso la función de uno de los botones que llamamos
“Cargar nueva imagen” con el tag “carga” se ingresan los
comandos que permitirán abrir los archivos de imagen que sean
necesarios. Vale la pena notar que dentro del mismo comando
“uigetfile” se puede especificar el tipo de archivo que se desea
cargar, esto permite limitar dentro del explorador la
visualización explicita de dichas extensiones:
[FileName Path]=uigetfile({'*.jpg;*.bmp;*.png'},'Abrir Imagen');
if isequal(FileName,0)
return
else
a=imread(strcat(Path,FileName));
end
imshow(a);
handles.direccion=strcat(Path,FileName);
guidata(hObject,handles)
la función if-else denota si no se ha ingresado la ruta del
archivo retorne esta como “0”, de lo contrario, mediante el
comando “imread” concatenando la ubicación junto con el
nombre del archivo de imagen (mediante el comando “strcat”)
se almacenará en la variable “a” y mostrara la misma.
4
Figura 13 – Asociación comando “uigetfile” con botón.
Figura 14- Explorador de archivos haciendo uso del botón “Cargar nueva
imagen”.
Una de las características de cada función asignada por cada
objeto agregado a la ventana del GUI, consta de la generación
de callbacks para compartir datos entre las funciones. De este
modo podemos almacenar los datos en la estructura handles, así
cada componente del GUI comparte la misma estructura
handles. Todos los callbacks generados por el GUI reciben esta
estructura como argumento y podrá ser utilizada dentro de otros
objetos invocándola nuevamente. Es de este modo que se envía
a los demás objetos la ruta y nombre de la imagen importada.
handles.direccion=strcat(Path,FileName);
guidata(hObject,handles)
De este modo el valor concatenado entre el nombre del
archivo y la ruta se asocia dentro del identificador
“handle.direccion” y luego es almacenada mediante el
“guidata(hObject,handles)” para ser usada en cualquier otra
función del GUI.
C. Comandos imshow() e Image().
Una vez generada la acción dentro de la función del botón
“Cargar nueva imagen” se procederá a ingresar las demás
acciones para cada botón. Para los botones “Original”, “Proceso
1” y “Proceso 2”, se asignará a cada uno de ellos acciones
particulares.
El botón “Original” ha de ser asignado a la vista original de
la imagen precargada anteriormente, para esto se utilizará el
identificador de dirección anteriormente almacenado mediante
el comando “imread” y su posterior visualización con el
comando “imshow”. Vale la pena recordar que el comando
 5

“imshow” muestra una vista previa de la imagen, nada más que

eso.
a=imread(handles.direccion);
imshow(a);

Figura 15- Asignación imagen original botón “Original” mediante “imshow”.

El botón “Proceso 1” será asignado para realizar una muestra

de la imagen haciendo uso del comando “image()” para denotar
la diferencia con el comando “imshow()”, leyendo la ruta de la
imagen, y aplicando el comando.
Figura 18- Visualización escala de grises mediante “imshow()”.
b=imread(handles.direccion);
image(b);
axis image;

Figura 16- Asignación imagen escala de grises mediante “image”.

El botón “Proceso 2” realizará la misma acción que el botón

“Proceso 1”, esta vez aplicando un mapa de color en grises
(colormap) mediante el comando “colormap(gray(255))”
denotando que la intensidad de la tonalidad se encontrará entre
0 y 255.
c=imread(handles.direccion);
image(c);
Figura 19- Visualización escala de grises mediante comando “image()”.
colormap(gray(255));
axis image;

Figura 17- Asignación imagen escala de grises mediante “image” y

“colormap”.

Es importante notar que además se utiliza el comando “axis

image” con el fin de no distorsionar el tamaño de la imagen.

Un ejercicio interesante se presenta en la asignación de la

función del botón “Proceso 1” al cargar una imagen en escala de
grises con el comando “image”, respecto al comando “imshow”
utilizado en el botón “Original”.
Figura 20- Visualización escala de grises mediante comando “image()”
aplicando “colormap(gray(255))”.

Tal como se puede notar en las figuras 18 y 19 la

visualización del comando “imshow” muestra la imagen tal
como es, sin aplicar ningún filtro, mientras el comando “image”
la muestra con un extraño color. Esto se debe a que en el
momento de aplicar el comando “image” Matlab predefine un
“colormap(parula)” el cual ajusta los niveles de color entre azul
y amarillo, por este motivo la imagen a escala de grises tiende a
cambiar drásticamente de color al aplicar el proceso de este
 6

botón, aún cuando no se ha implementado el comando

“colormap” en este proceso.

Figura 23- Imagen aplicando colormap(parula(255)).

Figura 21- Filtros de color disponibles para el comando “colormap”. El cambio que se nota en las figuras 22 y 23 se debe a la
escala de color, en la figura 23 claramente especificamos la
Entonces el comando “colormap” para las imágenes de una escala de color en 255, mientras que, curiosamente no solo el
sola capa ya implementado en el botón “Proceso 2” permite colormap predefinido del image() en la figura 22 es el parula,
alterar la escala de color acorde al estilo que se desee también tiene una escala predeterminada la cual es 64. Al hacer
implementar, en este caso el “colormap(gray(255))” que en la la comparación del image() sin colormap y con
escala de color no altera el tono o la intensidad de grises con colormap(parula(64)), se obtiene el mismo resultado.
respecto a la imagen original (figuras 18 y 20). Vale la pena
aclarar que este comando solo produce este efecto en las
imágenes de una sola capa, por lo cual se puede ver este cambio
en la imagen del ejemplo, dado que se encuentra en escala de
grises, mientras en imágenes a color será imposible visualizar
estos cambios debido a sus tres capas de color (RGB).

D. Particularidades.

Un suceso particular se puede mostrar al aplicar un

“colormap(parula(255))” a la imagen, y compararla con el
parula predefinido por Matlab.
Figura 24-Descripción ayuda de Matlab – parula.

Figura 25- Implementación de image() sin colormap “Proceso 1”, con

colormap(parula(64)) “Proceso 2”

Figura 22- Imagen colormap predeterminado por Matlab.

 7

aproximadamente iguales a [j,j+i,j+2*i,...,j+m*i],

donde m = fix((k-j)/i). Por ejemplo:

Figura 29- Instrucción (x = j: i: k; )

Otras modos de uso del operador (:) son las expresiones de

indexación comunes para una matriz, entre estas se encuentan:
• A(:,n) muestra la n-ava (nª) columna de la matriz A.
Figura 26- Colormap predeterminado “Proceso 1”.
Por ejemplo:

Figura 27- colormap(parula(64)) “Proceso 2”

E. Modificación de matrices de imágenes en escala de grises. Figura 30- A(:,n).

El signo de dos puntos (:) es uno de los operadores más útiles En el caso de la figura 30 el comando retorna los
de MATLAB, este permite crear vectores, generar subíndices de valores de la primera columna y la segunda columna.
arrays y especificar iteraciones de for.
• A(m,:) retorna la m-ava (mª) fila de la matriz A.
A continuacion se puede observar algunos de los usos mas
comunes de este:
• (𝑥 = 𝑗: 𝑘; ) este crea un vector x de espaciado
unitario con elementos [j,j+1,j+2,...,j+m] donde m
= fix(k-j). Si j y k son números enteros, entonces
esto es simplemente [j,j+1,...,k]. Por ejemplo:

Figura 28- Instrucción (x = j: k; )

• (𝑥 = 𝑗: 𝑖: 𝑘; ) este crea un vector x con espaciado

regular mediante i como incremento entre
elementos. Los elementos vectoriales son Figura 31- A(m,:).
 8

En el caso de la figura 31 el comando retorna los b=imread(handles.direccion);

b(:,:)=150;
valores de la primera fila y la segunda fila del arreglo colormap(gray(255));
image(b);
A. axis image;
function proceso2_Callback(hObject, eventdata, handles)
c=imread(handles.direccion);
• A(:) se encarga de reformular todos los elementos c(:,:)=30;
colormap(gray(255));
de A en un único vector de columna. Esto no tiene image(c);
ningún efecto si A ya es un vector de columna. axis image;

Figura 34- Reformulación de arreglo de imagen.

Figura 32- A(:)

De este modo todos los elementos se ajustan en un solo

vector columna.

• A(:,:) se encarga de reformular todos los elementos

de A en una matriz bidimensional. Esto no tiene ningún
efecto si A ya es una matriz o un vector.

Figura 35- Reformulación para arreglo con valor de 150

Figura 33- A(:,:)

Visto esto, es posible modificar los valores de los pixeles de

una imagen de modo tal que puede perder por completo su
tamaño o sentido.

En el siguiente caso se alterarán los valores de cada pixel de

manera uniforme por un mismo valor asignado en el colormap
gray, siendo 0 el color negro y 255 el color blanco. Para esto se
modificaran reformularan todos los pixeles de la imagen del
“Proceso 1” por 150 y los de la imagen del “Proceso 2” por 30.
function original_Callback(hObject, eventdata, handles)
a=imread(handles.direccion);
imshow(a);
function proceso1_Callback(hObject, eventdata, handles) Figura 36- Reformulación para arreglo con valor de 150
 9

Esto quiere decir que, al reformular todos los valores por

pixel con un mismo número, todos los pixeles tomarán dicho
valor.

III. CARGA DE IMÁGENES A COLOR EN GUIDE

A. Arreglos de imágenes a color.

Es el momento de incluir imágenes a color en el GUI de

Matlab, y para esto es necesario conocer como procesa la
adquisición de estas, incluyendo una en el espacio de trabajo.

Al leer la imagen y solicitar las dimensiones de esta, muestra

información de filas y columnas tal como con la imagen a escala
de grises, pero esta vez con una nueva información de capas.
Figura 38- GUIDE para imágenes a Color.

Para el botón “Original” se le asignará la visualización de la

imagen original mediante el comando “image()”, y a los botones
“Proceso 1”, “Proceso 2” y “Proceso 3” de momento, les serán
asignados comandos que modifiquen cada una de las capas de la
imagen entre los valores 220, 0 y 127 respectivamente.

Figura 37- Lectura de imagen e información de tamaño. El código de las funciones para cada botón quedaría de la
siguiente manera:
En este caso la imagen posee una dimensión de 544x850 y
cuenta con tres (3) capas, las cuales hacen referencia a los tres function original_Callback(hObject, eventdata, handles)
a=imread(handles.direccion);
colores primarios digitales (RGB). image(a);
function proceso1_Callback(hObject, eventdata, handles)
b=imread(handles.direccion);
b(:,:,1)=200;
B. Modificación de matrices de imágenes a color. b(:,:,2)=200;
b(:,:,3)=200;
image(b);
Como se había visto anteriormente en las imágenes en escala axis image;
function proceso2_Callback(hObject, eventdata, handles)
de grises, es posible alterar los valores de cada pixel de manera c=imread(handles.direccion);
c(:,:,1)=0;
uniforme, teniendo en cuenta que este tipo de imágenes solo c(:,:,2)=0;
poseen una capa, evitando la posibilidad de volver a visualizar c(:,:,3)=0;
image(c);
la imagen de manera alguna. axis image;
function proceso3_Callback(hObject, eventdata, handles)
d=imread(handles.direccion);
Esta alteración de pixeles también es posible de realizar en d(:,:,1)=127;
d(:,:,2)=127;
imágenes a color, especificando la capa que se desea modificar. d(:,:,3)=127;
image(d);
axis image;
En este caso se ha creado un nuevo GUIDE con cinco
botones, los cuales llevan el nombre de “Cargar nueva imagen”, La imagen original se vería de la siguiente manera.
“Original”, “Proceso 1”, “Proceso 2” y “Proceso 3”
respectivamente.

Al igual que en el GUI anterior el botón “Cargar nueva

imagen” será el gestor que permita buscar en el equipo mediante
el explorador la imagen a color que se desee tratar, y cada botón
de proceso será asignado para visualizar el tratamiento de
imagen que sea necesario.

Vale la pena recordar que cada botón, al igual que en la

sección anterior, será alterado en su programación acorde a la
necesidad de mostrar cambios en la imagen tratada.

Figura 39- Imagen a color original

 10

Los cambios aplicados a cada canal de la imagen se verían de los comandos de alteración de arreglos permite reemplazar todos
la siguiente manera. los valores de una matriz por un valor específico tal como sucede
en las figuras 40, 41 y 42, cada uno con un valor de color
diferente.

La imagen 40 es el resultado de alterar la escala de color de

las tres capas en 200. Al realizar el comando desde el Command
Window se puede observar el cambio numérico del arreglo,
leyendo la imagen y aplicando dichos formatos.
b(:,:,1)=200;
b(:,:,2)=200;
b(:,:,3)=200;

Figura 43- Lectura de la imagen de color

Figura 40- Imagen Modificada en sus pixeles por capas con valor de 200 .

Figura 44- Información original del arreglo de la imagen.

Como se puede notar en la figura 44, los valores del arreglo

corresponden a las escalas de color de cada pixel original y al
aplicar los comandos de reformulación en cada canal se obtiene
Figura 41- Imagen Modificada en sus pixeles por capas con valor de 0. lo siguiente:

Figura 45- Lectura de la imagen de color y reasignación de pixeles por capa.

Figura 42- Imagen Modificada en sus pixeles por capas con valor de 127.

El motivo por el cual se pierde por completo la percepción de

la imagen, permitiendo ver nada más el color aplicado en la
escala de color, es precisamente debido al reemplazo de los
Figura 46- Información nuevos valores del arreglo de la imagen.
valores de los pixeles de cada capa por el entero asignado a la
capa de color. Como se explicó en el apartado anterior uno de Este sería el resultado de la imagen 40, un reemplazo de todos
 11

los pixeles de cada canal (RGB) por el valor de 200, por tanto,
solo mostrara ese color. Lo mismo sucede para las imágenes 41
y 42, dado que se reemplazan los valores por 0 que corresponde
al color negro y al 127 que da como resultado una tonalidad de
gris un tanto mas oscuro al estar mas cercano al cero con
respecto a la figura 40. Se puede concluir que al modificar las
tres capas dentro de un mismo valor numérico por pixel, la
tonalidad de color será vista en escala de grises entre 0 a 255.

Si se aplicara el mismo tratamiento evitando modificar

alguna de las capas el resultado varía, dado que se aplica el
cambio de pixeles a las demás capas manteniendo una de ellas
con los valores originales permitiendo que la imagen se muestre
en la escala de color del canal sin modificar.

Figura 49 Modificación Capas R y G

Figura 47- Modificación Capas G y B

Figura 48- Modificación Capas R y B