cf_imagen Manipulación de imágenes

(1)

cf_imagen Manipulación de

imágenes

cf_imagen

Es un componente para manipulación de imagenes en ColdFusion y algunas funciones limitadas en Lucee, las características que aporta son:

Subir

Cambiar tamaño

Generar imagen miniatura Renombrar

Agregar imagen de marca de agua Agregar marca de agua de texto Eliminar

Todas estas funciones son utilizadas comunmente en la creación de galerías de imágenes y portafolios, su uso es bastante sencillo y tal vez te ayude a minimizar el tiempo de entrega de tu proyecto.

Se requieren dos argumentos para crear una instancia de este componente: Directorio de trabajo.

Puede no existir en el servidor, si no existe será creado cuando se necesite subir una imagen al servidor. Si se desea manipular una imagen existente en el servidor, se debe proveer la ruta completa a la imagen así que este directorio debe existir previamente. 1.

Nombre de la imagen

Si la imagen no existe, este argumento le indica al componente el nombre con el que será guardada en el servidor al momento de subirla con la función upload(). Si la imagen existe, entonces el componente cargará la imagen en una variable de imagen de

ColdFusion para después hacer manipulaciones. 2.

(2)

Los ejemplos y el código será mostrado en cfscript, así que para instanciar el componente se utilizaría:

//Obtengo la ruta completa del directorio de trabajo

dir = getDirectoryFromPath( getCurrentTemplatePath() ) & 'images/'; //Creo la instancia del objeto

myInstance = new cf_imagen( dir, 'myFile.jpg' )

Puedes ver algunos ejemplos en ingles aquí. http://elangelito.mx/examples/cf_imagen/

API

Propiedades

directory. Directorio de trabajo.

name. Nombre que será usado para guardar la imagen o el nombre de la imagen que será

cargada en el componente.

thumbName. Nombre que será usado para la imagen miniatura.

imageInstance. Variable de imagen de ColdFusion que hace referencia a la imagen

cargada en el componente.

thumbInstance. Variable de imagen de ColdFusion que hace referencia a la imagen

miniatura.

Funciones

init( required string directory, required string name, boolean instantiate )

Descripción

Constructor del componente, crea una instancia del componente y carga la imagen para manipulación si ésta existe.

Argumentos

directory: Ruta completa al directorio donde la imagen será guardada o donde la imagen

que será manipulada reside.

name: Nombre de la imagen a cargar, o el nombre que será usado para guardar una imagen

que será subida al servidor incluyendo la extensión.

instantiate: (Opcional) Debe ser true cuando se requiere manipular una imagen que ya

existe en el servidor. Valor por defecto false.

(3)

instantiate es true.

setInstance( required any Image ) Descripción

Si se tiene una Imagen de ColdFusion que se requiera manipular, con esta función se sustituye la imagen que se cargó al momento de instanciar para poderla manipular.

Argumentos

Image: Imagen de ColdFusion. Regresa: Nada

resize( width, height, quality ) Descripción

Cambia el tamaño de la imagen cargada. Es una capa para la función imageScaleToFit() de ColdFusion, si sólo se pasa el parámetro width, el ancho de la imagen será ajustado a este valor y el alto se calculará automáticamente para mantener las proporciones, si sólo se pasa el parámetro height, el alto de la imagen será ajustado a este valor y el ancho se calculará

automáticamente para mantener las proporciones.

Argumentos

width: ( Opcional si se pasa el parámetro height ). Valor entero en pixeles para ajustar el

ancho de la imagen.

height: ( Opcional si se pasa el parámetro width ). Valor entero en pixeles para ajustar el

alto de la imagen.

quality: ( Opcional ) Valor de la lista de parámetros válidos para la función

imageScaleToFit() . Valor por defecto highestQuality

Regresa: Nada

save( string name, string directory, numeric quality, boolean overwrite )

(4)

Descripción

Escribe la imagen en disco. El nombre con el que se guardará por defecto es el que se asignó al momento de instanciar el componente, si se pasa el parámetro name a esta función entonces se utilizará éste, lo mismo aplica para el directorio de trabajo.

Alternativamente se puede llamar a la función setName() previamente para establecer el nombre a utilizar para guardar. ej. setName( 'miNuevoNombre.jpg').

Argumentos

name. (Opcional) Nombre a usar para guardar la imagen en disco. directory. (Opcional) Ruta completa donde se guardará la imagen. quality. (Opcional) Valor entre 0 y 1. Valor por defecto 1.

overwrite. (Opcional) Si es true, Si existe un archvivo con el mismo nombre en la misma

ruta, ésta sera reemplazada, si el parámetro es false se lanzará un error. Valor por defecto

true.

Regresa: Nada

upload( string fileField, string destination, string nameConflict, string accept, boolean thumbnail)

Descripción

Sube la imagen contenida en el campo de formulario con el nombre definido por fileField, el formulario debe tener el atributo enctype="multipart/form-data", por defecto la imagen se

guardará en el directorio de trabajo especificada en el constructor, pero puede ser cambiado si se pasa el parámetro destination.

También se puede crear una imagen miniatura si se requiere.

Argumentos

fileField. Nombre de la variable que contiene la imagen a subir ej. 'FORM.image'.

destination. (Opcional) Ruta completa donde la imagen será guardada en el servidor, si se

omite se utilizará el directorio de trabajo especificado en el servidor.

nameConflict. (Opcional) Indica como se comportará el componente si existe un archivo

con el mismo nombre [overwrite|error|skip|makeUnique]. Valor por defecto overwrite.

accept. (Opcional) Tipo MIME aceptado, valor por defecto

image/jpg,image/jpeg,image/gif,image/png,application/pdf.

(5)

nombre <name>_thumb.<extension>. Valor por defecto false.

Regresa: Nada.

delete() Descripción

Borra una imagen del servidor, el componente buscará un archivo definido por las propiedades <directory>/<name>

Regresa: Nada.

createThumbnail( numeric width, numeric height, numeric ratio ) Descripción

Genera una imagen miniatura (thumbnail) de la imagen cargada y la escribe en disco con el nombre <name>_thumb.<extension> en el directorio de trabajo. El tamaño será calculado dividiendo el ancho de la imagen cargada por 1.618 dos veces, ¿por qué este valor?, bueno sucede que es la sección aurea o número dorado, así es como la naturaleza crearía el siguiente fractal más pequeño de alguna figura, pero puedes cambiarlo a una proporción de tu preferencia por ejemplo 2 si lo quieres a la cuarta parte del valor.

Después de ser guardada la imagen en miniatura, ésta se carga en el componente para hacer referencia a ella.

Argumentos

width. (Opcional) Número entero en pixeles que define el ancho de la imagen miniatura,

se calcula automáticamente si se omite.

height. (Opcional) Número entero en pixeles que define el alto de la imagen miniatura, se

calcula automáticamente si se omite.

ratio. (Opcional) Numero decimal usado para calcular el ancho y alto de la imagen

miniatura automáticamente. Valor por defecto 1.618

Regresa: Nada.

(6)

Descripción

Regresa true si la imagen cargada tiene una imagen miniatura, el componente busca por

<direcory>/<name>_thumb.<extension>

Regresa: Boolean

getInfo() Descripción

Regresa una estructura con metadata acerca de la imagen cargada como ancho, alto, nombre,

directorio, fuente, transparencia, etc...

Regresa: Structure

getThumbInfo() Descripción

Regresa una estructura con metadata acerca de la imagen miniatura cargada como ancho, alto,

nombre, directorio, fuente, transparencia, etc...

Regresa: Structure

isLandscape() Descripción

Regresa true si el ancho de la imagen cargada es más grande que el alto.

Regresa: Boolean.

(7)

Descripción

Regresa true si el alto de la imagen cargada es más grande que el ancho.

Regresa: Boolean.

createImageWatermark( required string watermark, string horizontalPosition, string verticalPosition, string width, string height, boolean transparency, string colorTransparency, string destination, string name ) Descripción

Utiliza la ruta completa de una imagen existente en el servidor y la pega en la imagen cargada previamente en el componente en la posición designada por los parámetros de la función

verticalPosition, horizontalPosition, la imagen resultante puede ser redimensionada y guardada

en una ruta diferente con un nombre diferente si es requerido.

*Para ColdFusion solamente, se puede asignar un color de transparencia a la imagen de marca de agua, esto es util cuando se requiere insertar como marca de agua una imagen que contiene un fondo blanco y se quiere eliminar ese "cuadro blanco".

Argumentos

watermark. Ruta completa a la imagen que se desea utilizar como marca de agua. horizontalPosition. (Opcional) Nombre de la posición horizontal de la marca de agua [

left | center | right ]. Valor por defecto right.

verticalPosition. (Opcional) Nombre de la posición vertical de la marca de agua [ top |

middle | bottom ]. Valor por defecto bottom.

width. (Opcional) Número entero en pixeles de ancho final de la imagen resultante, si se

omite se utilizará el ancho original de la imagen cargada.

height. (Opcional) Número entero en pixeles del alto final de la imagen resultante, si se

omite se utilizará el alto original de la imagen cargada.

transparency. (Opcional sólo para ColdFusion) If true el argumento colorTransparency

es aplicado a la marca de agua. Valor por defecto false.

colorTransparency. (Opcional) Nombre valido de color CSS/HTML para hacer

transparente en la marca de agua. Valor por defecto white.

destination. (Opcional) Ruta completa para la imagen resultante, si se omite se utilizará el

(8)

name. (Opcional) Nombre de la imagen resultante, si se omite se utilizará el nombre

asignado en el constructor.

Regresa: Nada.

createTextWatermark( required string text, string horizontalPosition, string verticalPosition, struct textOptions, string color, string destination, string name ) Descripción

Inserta una cadena de texto como marca de agua en la imagen, la posición sólo funciona en ColdFusion 10+ ya que Lucee no regresa el tamaño del texto insertado con la función imageDrawText() dificultando el cálculo de la posición dentro de la imagen original.

Argumentos

text. Cadena de texto a ser insertada como marca de agua.

horizontalPosition. (Opcional) Cadena de texto que indica la posición horizontal [ left |

center | right ]. Valor por defecto right.

verticalPosition. (Opcional) Cadena de texto que indica la posición vertical [ top | middle |

bottom ]. Valor por defecto bottom.

textOptions. (Opcional) Estructura con opciones para dar formato al texto

font. Nombre de la fuente. Valor por defecto monospace size. Número entero en puntos. Valor por defecto 10 style. bold | italic | boldItalic | plain (default)

strikethrough. yes | no underline. yes | no

color. (Opcional) Color del texto. Valor por defecto white.

destination. (Opcional) Ruta completa para la imagen resultante, si se omite se utilizará el

directorio de trabajo.

name. (Opcional) Nombre de la imagen resultante, si se omite se utilizará el nombre

designado en el constructor.

No Sub Pages

(9)

Soy cofundador de Toruga Consulting Group, empresa dedicada a ofrecer soluciones de escritorio y web con un enfoque de diseño responsivo para llegar al mayor número de dispositivos. Experto en ColdFusion y Javascript.