1

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 de la imagen ‘escaladegrisis.png’, recordando que esta debe
equations, figures, tables, or references. It should concisely state
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 Figura 2- Función imread en Command Window Matlab.
su procesamiento, implementando la interfaz grafica de
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
tanto con el espacio de trabajo “workspace” como con la
A. Ingreso de archivos de imagen en MATLAB a través de la información de imagen de nuestro equipo.
Ventana de Comandos.
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
Figura 3- Workspace Matlab – Tamaño matriz de imagen “a”
exacto y la extensión de la imagen. Sin embargo, es importante
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.

Ronald Steven Rodríguez Rodríguez. Adq Datos

Ronald Steven Rodríguez Rodríguez. Adq Datos

 2

que ofrece Matlab desde su ventana de comandos, puesto que

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
comando para lograr ver nuevamente la imagen. Figura 6- Implementación de impixelinfo.

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

Ronald Steven Rodríguez Rodríguez. Adq Datos

 3

Figura 9- Editor – Funciones por botones y figuras.

Figura 7- Creación de proyecto en blanco mediante interfaz grafica GUIDE.

Al mismo tiempo en el espacio de trabajo se puede observar
los archivos asociados al proyecto.
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
procesos que se le realizará a cada imagen. Figura 10- Espacio de trabajo (directorio).

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.

Ronald Steven Rodríguez Rodríguez. Adq Datos

 4

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 13 – Asociación comando “uigetfile” con botón.

Figura 12- Funciones botones ingresados.

Inicialmente se utilizó el comando “imread()” para cargar el

archivo de imagen teniendo en cuenta que la misma debe Figura 14- Explorador de archivos haciendo uso del botón “Cargar nueva
encontrarse en el mismo directorio de trabajo, obligando al imagen”.
usuario a realizar este procedimiento, es por esto que se ha
Una de las características de cada función asignada por cada
ingresado un botón al cual se le ha asignado el nombre de
objeto agregado a la ventana del GUI, consta de la generación
“Cargar imagen” y el tag “carga”, con el fin de ser usado para
de callbacks para compartir datos entre las funciones. De este
buscar la imagen a procesar directamente desde la interfaz,
modo podemos almacenar los datos en la estructura handles, así
mediante una serie de comandos. Uno de estos comandos es
cada componente del GUI comparte la misma estructura
“uigetfile” el cual permite incorporar el explorador de archivos
handles. Todos los callbacks generados por el GUI reciben esta
y configurar la apertura de un archivo en cualquier ubicación del
estructura como argumento y podrá ser utilizada dentro de otros
equipo, eliminando la necesidad de almacenar las imágenes en
objetos invocándola nuevamente. Es de este modo que se envía
el mismo directorio de trabajo, entregándonos el nombre del
a los demás objetos la ruta y nombre de la imagen importada.
archivo y su ruta dentro del equipo.
handles.direccion=strcat(Path,FileName);
Haciendo uso la función de uno de los botones que llamamos guidata(hObject,handles)

“Cargar nueva imagen” con el tag “carga” se ingresan los

comandos que permitirán abrir los archivos de imagen que sean De este modo el valor concatenado entre el nombre del
necesarios. Vale la pena notar que dentro del mismo comando archivo y la ruta se asocia dentro del identificador
“uigetfile” se puede especificar el tipo de archivo que se desea “handle.direccion” y luego es almacenada mediante el
cargar, esto permite limitar dentro del explorador la “guidata(hObject,handles)” para ser usada en cualquier otra
visualización explicita de dichas extensiones: función del GUI.

[FileName Path]=uigetfile({'*.jpg;*.bmp;*.png'},'Abrir Imagen');

if isequal(FileName,0) C. Comandos imshow() e Image().
return
else
a=imread(strcat(Path,FileName));
imshow(a); Una vez generada la acción dentro de la función del botón
end “Cargar nueva imagen” se procederá a ingresar las demás
handles.direccion=strcat(Path,FileName);
guidata(hObject,handles) acciones para cada botón. Para los botones “Original”, “Proceso
1” y “Proceso 2”, se asignará a cada uno de ellos acciones
la función if-else denota si no se ha ingresado la ruta del particulares.
archivo retorne esta como “0”, de lo contrario, mediante el
comando “imread” concatenando la ubicación junto con el El botón “Original” ha de ser asignado a la vista original de
nombre del archivo de imagen (mediante el comando “strcat”) la imagen precargada anteriormente, para esto se utilizará el
se almacenará en la variable “a” y mostrara la misma. identificador de dirección anteriormente almacenado mediante
el comando “imread” y su posterior visualización con el

Ronald Steven Rodríguez Rodríguez. Adq Datos

 5

comando “imshow”. Vale la pena recordar que el comando

“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
Figura 18- Visualización escala de grises mediante “imshow()”.
imagen, y aplicando el comando.

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 Figura 19- Visualización escala de grises mediante comando “image()”.
0 y 255.
c=imread(handles.direccion);
image(c);
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
Figura 20- Visualización escala de grises mediante comando “image()”
grises con el comando “image”, respecto al comando “imshow” aplicando “colormap(gray(255))”.
utilizado en el botón “Original”.
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

Ronald Steven Rodríguez Rodríguez. Adq Datos

 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.

Ronald Steven Rodríguez Rodríguez. Adq Datos

 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 (𝑥 = 𝑗: 𝑖: 𝑘; )

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

indexación comunes para una matriz, entre estas se encuentan:
Figura 26- Colormap predeterminado “Proceso 1”. • A(:,n) muestra la n-ava (nª) columna de la matriz A.
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 (𝑥 = 𝑗: 𝑘; )

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

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

Ronald Steven Rodríguez Rodríguez. Adq Datos

 8

function proceso1_Callback(hObject, eventdata, handles)

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

Figura 32- A(:) Figura 34- Reformulación de arreglo de imagen.

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);

Ronald Steven Rodríguez Rodríguez. Adq Datos

 9

botones, los cuales llevan el nombre de “Cargar nueva imagen”,

“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 36- Reformulación para arreglo con valor de 150

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 Figura 38- GUIDE para imágenes a Color.
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. 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.

El código de las funciones para cada botón quedaría de la

siguiente manera:

function original_Callback(hObject, eventdata, handles)

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

En este caso se ha creado un nuevo GUIDE con cinco

Ronald Steven Rodríguez Rodríguez. Adq Datos

 10

Figura 42- Imagen Modificada en sus pixeles por capas con valor de 127.
Figura 39- Imagen a color original
El motivo por el cual se pierde por completo la percepción de
Los cambios aplicados a cada canal de la imagen se verían de la imagen, permitiendo ver nada más el color aplicado en la
la siguiente manera. escala de color, es precisamente debido al reemplazo de los
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
los comandos de alteración de arreglos permite reemplazar todos
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 40- Imagen Modificada en sus pixeles por capas con valor de 200 .

Figura 43- Lectura de la imagen de color

Figura 41- Imagen Modificada en sus pixeles por capas con valor de 0. 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
lo siguiente:

Ronald Steven Rodríguez Rodríguez. Adq Datos

 11

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

Figura 47- Modificación Capas G y B

Figura 46- Información nuevos valores del arreglo de la imagen.

Este sería el resultado de la imagen 40, un reemplazo de todos

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 48- Modificación Capas R y B

Ronald Steven Rodríguez Rodríguez. Adq Datos

 12

Figura 49 Modificación Capas R y G

Ronald Steven Rodríguez Rodríguez. Adq Datos