Boozox » Imagen Digital

Guia básica para editar imágenes en PHP con GD

Alex Barros — Tue, 14 Oct 2008 11:28:21 +0000

Crear y editar imágenes con PHP puede ser muy fácil si tienes instalada la biblioteca GD en tu servidor.

Aunque las opciones que ofrece GD son muy básicas, son suficientes para desarrollar scripts con capacidades muy superiores. Ahora voy a presentaros estas funciones básicas con ejemplos, para que puedas crear aplicaciones más complejas.

Crear la imagen de cero o desde un archivo

Para tratar imágenes en GD trabajamos con recursos o variables tipo resource de imágenes. Esto es una varible que representa a la imagen.

Para crear un nuevo recurso de imagen podemos usar la función imagecreate() aúnque es más recomendable usar la función imagecreatetruecolor()

$im = imagecreatetruecolor(300, 200); //a partir de aqui trabajo con una imagen de 300×200
$im2 = imagecreatetruecolor(100, 100); //he creado otra imagen distinta con dimensiones 100×100

Si queremos partir de una imagen ya existente, para convertirla en recurso tendremos que usar la función adecuada dependiendo del formato de la imagen. Los principales formatos son JPEG, PNG y GIF; con las funciones imagecreatefromjpeg(), imagecreatefrompng() y imagecreatefromgif() respectivamente.

$miJpeg =imagecreatefromjpeg(‘miimagen.jpg’); //he creado un recurso a partir del archivo miimagen.jpg

Si quieres ahorrarte el pensar a la hora de crear un recurso a partir de imagen, o desconoces el formato de entrada de la imagen (y quieres que lo haga automáticamente) puedes usar esta función para crear cualquier tipo de imagen.

function newimage($src) {
$im = false;
switch(true) {
case eregi(‘http://’, $src):
$im = imagecreatefromstring( getUrlData($src) );
imagealphablending($im, true);
imagesavealpha($im, true);
break;
case eregi(‘\.jpg’, $src):
$im = imagecreatefromjpeg($src);
break;
case eregi(‘\.gif’, $src):
$imp = imagecreatefromgif($src);
$x = imagesx($imp);
$y = imagesy($imp);
$im = imagecreatetruecolor($x, $y);
imagefilledrectangle( $im, 0, 0, $x, $y, imagecolorallocate($im, 255, 255, 255) );
imagecopy($im, $imp, 0, 0, 0, 0, $x, $y);
break;
case eregi(‘\.png’, $src):
$im = imagecreatefrompng($src);
imagealphablending($im, true);
imagesavealpha($im, true);
break;
}
return $im;
}
function getUrlData($url){
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_FAILONERROR, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$get = curl_exec($ch);
curl_close($ch);
return $get;
}

[descargar código]

Esta función puede crear una imagen a partir de JPEG, PNG, GIF o URL (requiere CURL)

Si queremos saber las dimensiones de un recurso de imagen, usaremos las funciones imagesx($im) e imagesy($im) que devuelven el ancho y alto del recurso, en píxeles, respectivamente.

Copiar, recortar y redimensionar

La modificación más básica que podemos hacer a una imagen es recortarla y redimensionarla.

En ambos casos la forma de trabajar es, en primer lugar crear un nuevo recurso con las dimensiones apropiadas, y en segundo lugar copiar de la imagen origen a la imagen destino aplicando el cambio deseado.

Recortar una imagen

Para recortar una imagen de, por ejemplo, 500 x 400 en 50px por la derecha y por abajo, haremos lo siguiente:

Creamos un nuevo recurso de 500 – 50 = 450 por 400 – 50 = 350px
Usamos la función imagecopy para copiar de la imagen origen, en nuestra nueva imagen
bool imagecopy ( resource $im_destino , resource $im_origen , int $pos_x_destino , int $pos_y_destino , int $pos_x_origen , int $pos_y_origen , int $ancho_origen , int $alto_origen )
Los dos primeros parámetros son los recursos destino y origen
Los dos siguientes son la posición en eje x e y de la imagen destino, donde queremos comenzar a copiar (en nuestro caso 0,0; porque el eje está arriba y a la izquierda)
Los dos siguientes son el ancho y el alto de la imagen que queremos recortar del aimagen original. En nuestro caso 450 y 350.

$im_origen = imagecreatefromjpeg(‘mi_imagen.jpg’); //sabemos que mide 500 x 400
$im_destino = imagecreatetruecolor(450, 350); //im_destino contendrá la nueva imagen recortada
imagecopy($im_destino, $im_origen, 0, 0, 0, 0, 450, 350);
// Ahora im_destino es im_origen recortada por abajo y por la derecha 50px

[descargar código] Ejemplo: [original] [recortada dinámicamente]

Redimensionar una imagen

En este ejemplo vamos a redimensionar a la mitad la imagen origen, sea cual sea su tamaño.

Crearemos primero un nuevo recurso con las dimexiones x/2 e y/2, y usaremos la función imagecopyresampled() (también podríamos usar imagecopyresized(), pero la que vamos a usar suaviza los píxeles interpolándolos – tiene mejor calidad)

$im_origen = imagecreatefrompng(‘foo.png’);
$ancho = imagesx($im_origen);
$alto = imagesy($im_origen);
$nuevo_ancho = round($ancho / 2);
$nuevo_alto = round($alto / 2);
$im_destino = imagecreatetruecolor($nuevo_ancho, $nuevo_alto);
imagecopyresampled($im_destino, $im_origen, 0, 0, 0, 0, $nuevo_ancho, $nuevo_alto, $ancho, $alto);
// ahora im_destino es la mitad de grande que im_origen

Dibujar figuras y texto

Las figuras que GD nos deja pintar son muy básicas, parecidas a las que ofrece el programa Paint

En este punto lo más importante es crear colores para una imagen. Los colores se deben crear y asociar a una imagen mediante la función imagecolorallocate(). El color lo indicamos mediante parámetros RGB (Red Green Blue) que podemos extraer fácilmente de cualquier paleta, como la del Photoshop o el Gimp

Dibujar un rectángulo

Quizás la figura más simple. Podemos dibujar sólo el borde del rectángulo con la función imagerectangle() o el rectangulo relleno de color, con la función imagefilledrectangle()

bool imagerectangle ( resource $imagen , int $x1 , int $y1 , int $x2 , int $y2 , int $color )

bool imagefilledrectangle ( resource $imagen , int $x1 , int $y1 , int $x2 , int $y2 , int $color )

$imagen = imagecreatefromjpeg(‘mi_imagen.jpg’);
$negro = imagecolorallocate($imagen, 0, 0, 0);
//voy a dibujar un rectangulo negro entre las coordenadas (5,5) y (25,15), recuerda que el eje está arriba a la izquierda
imagefilledrectangle($imagen, 5, 5, 25, 15, $negro);

Otras figuras

Existen muchas figuras que puedes dibujar con GD, desde una línea hasta un polígono, pasando por la elipse o el píxel. Sólo busca la que más te conviene en la documentación, o combina varias para obtener la figura deseada.

Escribir texto

Es realmente sencillo. Si no te quieres complicar la vida, puedes usar la función imagestring() que te da la opción de elegir entre 5 fuentes internas indicando sólo el número de referencia…

$im = imagecreate(100, 30); //creo una nueva imagen de 100×30
$fondo = imagecolorallocate($im, 255, 255, 255); //blanco. El primer color creado, se utiliza como fondo automaticamente para esa imagen
$color_texto = imagecolorallocate($im, 0, 0, 255); //azul
// escribo la cadena arriba a la izquierda con la fuente #5
imagestring($im, 5, 0, 0, "¡Hola mundo!", $color_texto);

… o si quieres tener más control sobre el estilo, puedes usar fuentes TrueType con la función imagettftext() (en la web DaFont tienes miles de fuentes TrueType gratuitas)

$im = imagecreatetruecolor(400, 30); //creo una nueva imagen de 400×30
// creo algunos colores
$blanco = imagecolorallocate($im, 255, 255, 255);
$gris = imagecolorallocate($im, 128, 128, 128);
$negro = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $blanco); //relleno el fondo
// El texto a pintar
$texto = "Boozox.net";
// El archivo ttf, escribe la ruta correctamente!!
$fuente = ‘fuente.ttf’;
// Agrego una sombra al texto
imagettftext($im, 20, 0, 11, 21, $gris, $fuente, $texto);
// Escribo el texto
imagettftext($im, 20, 0, 10, 20, $negro, $fuente, $texto);

[descargar código]
Demo:

Tratar bien la transparencia en PNG

Las imágenes PNG admiten un canal Alpha que indica la opacidad en cada punto de la imagen, para crear efectos semitransparentes. Si te interesa que esta transparencia se muestre correctamente, deberás calentarte un poco más la cabeza, y tener el canal Alpha siempre en cuenta. Te aconsejo que incluyas estas dos líneas después de crear una nueva imagen con transparencia (aunque tendrás que estar siempre atento de que el canal alpha no se pierda!)

$im = imagecreatefrompng(‘mi_transparencia.png’);
//conservar transparencia
imagealphablending($im, true);
imagesavealpha($im, true);

Recuerda también que puedes crear colores con canal de transparencia usando imagecolorallocatealpha() en lugar de imagecolorallocate()

Exportar la imagen para visualizarla

Después de haber modificado nuestra imagen tal como deseamos, tendremos que exportarla. Existe una función para cada formato de salida (imagejpeg(), imagepng(), imagegif(), etc…). Personalmente te recomiendo siempre exportar en PNG porque se conserva la calidad y la nitidez mucho mejor.

En todos los casos tendremos la opción de generar el código de la imagen, si queremos que el archivo PHP simule ser la propia imagen, o indicarle dónde queremos que almacene la imagen resultado.

Para el primer caso, tendremos que indicar mediante las cabeceras que lo que estamos a punto de mostrar es una imagen. Para esto usamos la función header() indicando el tipo de archivo en concreto de que se trata (image/jpeg, image/png o image/gif).

//este codigo se incluiria al final del proceso de edicion, suponiendo que $im es el recurso de la imagen que queremos mostrar
header("Content-type: image/png");
imagepng($im);

Una vez creado este archivo, podemos mostrar el resultado en una página HTML simplemente creando una etiqueta de imagen que referencie a ese archivo .php

Si queremos almacenar en nuestro disco la imagen resultante, tendremos que pasar como segundo parámetro a la función el nombre del archivo que queremos generar.

imagepng($im,‘ruta/miarchivo.png’);

Recuerda que me interesa mucho tu opinión. Crees que falta algo? tienes dudas? vas a trabajar con la librería GD ahora que sabes cómo funciona? has hecho experimentos curiosos con imágenes dinámicas? …

Redimensionar en PHP a tamaño fijo

Alex Barros — Sat, 20 Sep 2008 15:02:55 +0000

Ver también Guía básica para editar imágenes en php con GD

Esta es una técnica para redimensionar imágenes a un tamaño fijo (aunque no guarde proporción), sin distorsionar la imágen.

No, no se trata del escalado líquido. Esa técnica es demasiado compleja. Se trata de recortar la imágen para adaptarla a la nueva resolución, perdiendo el mínimo espacio posible.

Foto de Basajaun en Flickr Licencia CC(by-nc-sa)

Para hacer esto, he desarrollado este algoritmo, que paso a compartir con todos para que lo uséis como os de la gana (requiere Biblioteca GD)

function resizeFit($im,$width,$height) {
//Original sizes
$ow = imagesx($im); $oh = imagesy($im);
//To fit the image in the new box by cropping data from the image, i have to check the biggest prop. in height and width
if($width/$ow > $height/$oh) {
$nw = $width;
$nh = ($oh * $nw) / $ow;
$px = 0;
$py = ($height – $nh) / 2;
} else {
$nh = $height;
$nw = ($ow * $nh) / $oh;
$py = 0;
$px = ($width – $nw) / 2;
}
//Create a new image width requested size
$new = imagecreatetruecolor($width,$height);
//Copy the image loosing the least space
imagecopyresampled($new, $im, $px, $py, 0, 0, $nw, $nh, $ow, $oh);
return $new;
}

[Descargar código]

Cómo utilizar

Si no estás familiarizado con la edición de imágenes en PHP, no te preocupes. Para utilizar la función de arriba, tenemos que pasarle como parámetro una imágen tipo resource de GD y dos números indicando el ancho y alto que queréis forzar a la foto.

Para que se vea, hay que editar las cabeceras HTTP indicando que el contenido es una imágen. Y a este archivo de imágen (aunque sea un PHP) se le puede llamar desde la etiqueta img de HTML. Dejemos que hable el código:

imagen.php

//Primero creo el resource de la imagen desde el original en JPEG
$im = imagecreatefromjpeg(‘original.jpg’);
//Ahora uso la función antes definida, con unos parámetros de ancho y alto que yo quiera
$resized = resizeFit($im, 100, 150);
//Indico en la cabecera HTTP que es una imagen
header("Content-type: image/png");
//Por último exporto la nueva imagen
imagepng($resized);

miPagina.html

Esta es mi foto redimensionada a 100 x 150:

Puedes ver un ejemplo en …

Esta técnica la uso en Gpsia para mostrar las imágenes al tamaño que yo le diga, sin que se vean distorsionadas. Échale un ojo, y de paso ves las rutas tan increíbles que está subiendo la gente.

Imaset y Wordpress 2.6

Alex Barros — Sat, 19 Jul 2008 22:59:15 +0000

Según comentan en AyudaWordpress Imaset es incompatible con Wordpress 2.6.

Pero yo lo he probado y sí me ha funcionado correctamente.

De modo que si tienes algún problema en Imaset, ya sea porque has cambiado de versión o por cualquier otra causa, deja un comentario en este post para que lo solucionemos cuanto antes.

Lo que sí es cierto es que Imaset explora toda la carpeta wp-content para buscar imágenes, pero no contempla el hecho de que esta carpeta se encuentre fuera de la ruta usual (hecho que permite la nueva versión de WordPress). Esto se tendrá en cuenta para próximas versiones.

Imaset 2.2 liberado

Alex Barros — Tue, 13 May 2008 06:00:23 +0000

Descarga Imaset 2.2

La nueva versión de Imaset ya ha llegado!

Imaset 2.2 es compatible con Wordpress 2.5 y además trae algunas mejoras:

Mejor calidad en la previsualización, y más respeto a las imágenes PNG en el canal alpha
Dos nuevos filtros
Transferencia correcta de Marcas de agua con PNG
Interfaz mejorada, y adaptada al nuevo look de WP

Instalación

Instalar Imaset es muy sencillo:

Descarga el archivo imaset_2-2.zip
Descomprime el contenido en tu ordenador
Sube la carpeta imaset/ por ftp a tu servidor, en la carpeta wp-content/plugins/
Activa el plugin en la sección Plugins del panel de administración Wordpress
Ya está!

Usar la herramienta

Una vez el plugin está activado, aparecerá en el panel de escritura un botón con la palabra “Imaset”. Al pulsar este botón se abrirá el panel de Imaset, mostrando tus imágenes, y los filtros disponibles divididos en categorías.

Marcas de agua

Poner marcas de agua de tu web es muy sencillo, y ahora se respeta la transparencia del PNG, así que puedes añadir efectos interesantes!

Busca entre los filtros de la categoría “Personalizar” el de “marca de agua“. Pulsa en la varita mágica y selecciona el archivo de la imágen (debe estar almacenada en el directorio llamado src/) y el lugar donde posicionarlo.

Filtros incluidos

Sombra
Marco
Reflejo
Reflejo3D
Brillo
Perspectiva
Glossy
Invertir colores
Colorizar
Desenfoque suave
Desenfoque fuerte
Desenfoque gaussiano
Marca de Agua
Redimensionar

Recuerda siempre Guardar los cambios antes de cerrar el programa Imaset.

Agradecimientos:

Me gustaría agradecer a Patricio Villa, Francesc Josep, Francisco Espinoza, y a todas las personas que usan, apoyan y se interesan por Imaset.

Feedback necesario

Para que Imaset avance y mejore, es imprescindible vuestra ayuda. Comenta qué te parece, cómo puede mejorar Imaset, si tienes problemas, etc…

Imagen promocional de Geo

Alex Barros — Sun, 11 May 2008 02:24:58 +0000

Hoy he realizado esta imagen promocional de la herramienta GeoGPS. Refleja bastante bien lo que creo que es Geo en su totalidad, y además creo que me ha quedado currado.

Lo he hecho enteramente con Gimp, usando fuentes de Dafont. Ha salido al segundo intento, y he necesitado hacer antes varios bocetos en papel.

Este tipo de gráficos que muestran una herramienta de un vistazo pueden ser muy útiles durante la promoción, y creo que voy a empezar con la promoción de Geo dentro de muy poquito.

Por cierto, guardo una sorpresa muy importante para esta semana próxima. Estad atentos!

Desenfoque gaussiano: cómo funciona + filtro para Imaset

Alex Barros — Tue, 18 Dec 2007 22:18:08 +0000

Me he propuesto realizar el filtro de Desenfoque Gaussiano, y lo he conseguido. A continuación os muestro el algoritmo, y la descarga del filtro para quienes usen Imaset 2.1

El algoritmo

El filtro gaussiano consiste en la mezcla de los colores de una imágen para conseguir un efecto de desenfoque. Esta es una explicación muy general, y por supuesto el algoritmo es más complejo que esto.

En primer lugar, consideraremos la imágen como una matriz de puntos (pixeles), con unos valores determinados de rojo, verde y azul. A partir de aquí, los valores de cada punto de la nueva imágen, serán una combinación de los puntos cercanos. De esta forma, si un punto es de color rojo, y cercano a él hay puntos negros, este rojo se oscurecerá (y los negros se enrojecerán).

Pero para determinar cuáles son los pixeles que son cercanos, y los que no, se debe especificar al filtro un radio de acción. Con esto, si por ejemplo indicamos un radio de 10 pixeles, cada píxel de la nueva imágen se verá modificado por los todos los pixeles a menos de 10 unidades de distancia. Pero no todos los pixeles modifican con la misma “fuerza”, cuanto más cerca estén del pixel que se está modificando, más valor tendrán en el cálculo del nuevo color. Es aquí donde aparece nuestro simpático amigo Gauss.

La función de la distribución Gaussiana va a ayudarnos a adjudicar cuánto aporta cada pixel, en función de lo cerca o lejos que se encuentre. Esta función tiene la forma donde (x-b) es la distancia entre el pixel que está siendo modificado y el píxel del que se está tomando el valor, a y c valen 1, y f(x) resulta un número Real entre 0 y 1 que representa el porcentaje de influencia.

Resumiendo

Lo que está claro es que hay que mezclar los píxeles entre sí, y que usaremos un radio de influencia en que cuanto más lejos está un píxel de otro, menos le afecta.

Después de analizar el problema, y aplicar una fórmula estadística, podemos concluir que el valor de cada pixel es:

La suma de todos los píxeles dentro del radio R, multiplicados cada uno por (tal y como se ha descrito antes), y todo esto, dividido entre la suma de todos los valores de la fórmula en los puntos que intervienen.

Y todo eso es sólo para calcular uno de los tres componentes (Rojo, Verde o Azul) de un sólo pixel.

De modo que, a falta de una fórmula mágica de optimización, el efecto de desenfoque Gaussiano no es ninguna broma, realiza una cantidad muy elevada de cálculos (que aumenta junto al Radio y al tamaño de la imágen).

El archivo de descarga

Aquí os dejo el código fuente y la descarga del filtro Desenfoque Gaussiano para Imaset 2.1
Tened en cuenta que, como he dicho, es un filtro muy costoso, y aplicarlo puede llevar bastantes segundos.

La forma de poder usarlo es: descargar el archivo ZIP, descomprimir su contenido, y subir el archivo gaussian.xml al directorio “/filters” y el archivo es_ES.php al directorio “/lang”

Ejemplo del filtro Gaussiano en Imaset

Como se puede apreciar, realiza un toque de suavizado, si se aplica poco desenfoque (poco radio).

Código fuente

Os dejo como siempre el código fuente de este filtro.

gaussian_blur
effect
$rad=5
if(!$rad) $rad = 5;
$sx = imagesx($im);
$sy = imagesy($im);
for($x=-$rad;$x<$sx+$dar;$x++) // meto en una matriz los valores de colores
{
for($y=-$rad;$y<$sy+$rad;$y++)
{
if($x<0 || $y<0 || $x>$sx || $y>$sy)
$imatrix[$x][$y] = array($imaset->Red,$imaset->Green,$imaset->Blue);
else {
$rgb = ImageColorAt($im, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
$imatrix[$x][$y] = array($r,$g,$b);
}
}
}
// Ahora voy a poner valores (calculandolos previamente)
for($x=0; $x<$sx; $x++) { // recorro el array antes construido, pixel a pixel
for($y=0; $y<$sy; $y++) {
unset($su1R,$su1G,$su1B,$su2,$sue); // inicializo
for($i=$x-$rad; $i<$x+$rad; $i++) { // circundantes en eje x
for($j=$y-$rad; $j<$y+$rad; $j++) { // circundantes en eje y
$sue = round(pow(2.7,-(pow(($i-$x),2) + pow(($j-$y),2)))*100,4); //valor gaussiano de peso
$su1R += $sue * $imatrix[$i][$j][0]; //Sumando de rojos
$su1G += $sue * $imatrix[$i][$j][1]; //Sumando de verdes
$su1B += $sue * $imatrix[$i][$j][2]; //Sumando de azules
$su2 += $sue;
}
}
imagesetpixel($im,$x,$y,imagecolorallocate($im,round($su1R/$su2),round($su1G/$su2),round($su1B/$su2)));
}
}
return $im;

Efecto 3DReflect para Imaset

Alex Barros — Sat, 15 Dec 2007 21:11:33 +0000

Acado de crear un nuevo efecto para Imaset, el 3DReflect. Si estás usando la versión 2.1, podrás utilizar este nuevo filtro subiendo un pequeño archivo XML a la carpeta “/filters” del plugin.

El filtro

El efecto es similar al ya existente de Reflejo. La diferencia es que este efecto es tridimensional, dando un efecto de profundidad.

Descargas

Descarga el archivo de filtro 3DReflect y súbelo a la carpeta “/filters” para empezar a disfrutarlo.Se adjunta también el archivo de idioma Español es_ES.php, para tener la traducción de los parámetros de este nuevo plugin (súbelo a tu carpeta “/lang”).

Código fuente

Este es el código fuente del archivo XML. Todabía no he escrito la API para desarrollar filtros de Imaset, pero con este ejemplo, puede que alguien ya se atreva a intentar algo.

3DReflect
decoration
$s=30
$oi=60
$pr=25
//controlo los limites
$s = $imaset->lim($s,300,1); //tamaño
$oi = $imaset->lim($oi,100,5); //opacidad inicial
$pr = $imaset->lim($pr,100,0); //profundidad
$sx = imagesx($im);
$sy = imagesy($im);
if($s>$sy) $s = $sy-1;
$x = $sx+2*$pr;
$y = $sy+$s;
$reflekt = imagecreatetruecolor($x,$y);
$color = imagecolorallocate($reflekt, $imaset->Red,$imaset->Green,$imaset->Blue); //Fondo
imagefilledrectangle($reflekt, 0, 0, $x, $y, $color); //Relleno el fondo
imagecopy($reflekt, $im, $pr, 0, 0, 0, $sx, $sy);
$reflekt = $imaset->resize($reflekt,‘200%’,”); //resize al doble por mejorar calidad
//hago el efecto conico de reflejo
for($i=0;$i<=$s*2;$i++)
imagecopyresampled($reflekt, $im, $pr*2-($pr*$i/$s), $sy*2+$i, 0, $sy-(round($i/2)+1), $sx*2+2*($pr*$i/$s), 1, $sx, 1);
$reflekt = $imaset->resize($reflekt,‘50%’,”); //resize a la mitad
//finalmente creo el efecto transparencia con una imagen comodin
$bla = imagecreatetruecolor($x,1);
$color = imagecolorallocate($bla, $imaset->Red,$imaset->Green,$imaset->Blue); //Fondo
imagefilledrectangle($bla, 0, 0, $x, 1, $color); //Relleno el fondo
for($i=0;$i<$s;$i++)
imagecopymerge($reflekt, $bla, 0, $sy+$i, 0, 0, $x, 1, 100-round($oi-($i*$oi/$s)));
return $reflekt;

Imaset 2.1 Liberado

Alex Barros — Wed, 28 Nov 2007 18:22:42 +0000

nueva version 2.2 Al fin me decido a liberar la versión 2.1 de Imaset.

El plugin lleva unas semanas finalizado, pero he estado probándolo en diferentes servidores y distintos navegadores y, dada la gran cantidad de modificaciones internas que trae este nuevo plugin, han surgido una serie de incompatibilidades.

Sin embargo he decidido lanzar esta versión, ya que la considero estable (a falta de solucionar algunos bugs) para que quien no se vea afectado por estas incompatibilidades pueda ir disfrutando.

Problemas conocidos

Fundamentalmente dos:

Dada la nueva implementación de filtros almacenados en archivos externos, hay dos filtros que en algunos servers no dan buenos resultados. Estoy trabajando en solucionarlo para posteriores versiones
No funciona en Internet Explorer 6. Esto no me sorprende… es cosa del JavaScript, y también trabajo en hacerlo compatible.

Y ahora, lo más importante:

Novedades de Imaset 2.1

Aplicación directa o personalizada. Todos los filtros pueden ser aplicados con un sólo click (con sus valores por defecto). Pero muchos de ellos incorporan también la posibilidad de personalizar a tu gusto los parámetros, así obtienes el resultado óptimo.
Navegación más rápida. En esta nueva versión es JavaScript quien tiene el papel de la navegación, mucho más que Ajax. De esta forma todas las tareas resultan el doble de rápidas.
Visualización del historial. Puedes ver los filtros que has aplicado a una imágen, y eliminar uno por enmedio que no te guste.
Filtros externos. Existen dos tipos de filtros en Imaset 2.1: los del núcleo, que son muy básicos, y una serie de filtros almacenados exteriormente en archivos, dentro de la carpeta src/. Esto permite crear nuevos filtros usando una API (que publicaré próximamente), y así añadirte nuevos filtros, subiendo un simple archivo XML
Personalización. En el archivo settings.php tienes una serie de parámetros que puedes personalizar. Los dos más importantes son el color de fondo y el idioma. El color de fondo es respetado por todos los filtros. El idioma puede ser Español, Inglés, Chino o Italiano.

Filtros disponibles:

Descoración

Sombra
Marco
Reflejo
Perspectiva
Ondular

Color

Invertir colores
Colorizar

Efectos

Desenfoque suave
Desenfoque fuerte
Encontrar bordes

Personalizado

Marca de agua
Redimensionar

Código fuente

Puedes ver el código fuente de esta nueva versión descargándotela o diréctamente en Codis.

Ejemplos de imágenes tratadas con Imaset:

Novedades de Imaset 2.1

Alex Barros — Fri, 16 Nov 2007 13:57:22 +0000

Imaset 2.1 está muy cerca. La primera beta ya está siendo distribuida entre algunos beta-testers, y la versión definitiva no tardará mucho en llegar.

Dado el éxito que tuvo la versión 2.0 del plugin, para esta siguiente versión (2.1) he decidido reestructurar todo el código, de arriba a abajo, para hacerlo mucho más modulable.

En esta nueva versión, se incluye un archivo settings.php, en el cual pueden configurarse algunas características, como el color de fondo de tu web, el idioma que quieres para la interfaz, y algunas características más.

El peso de la navegación se ha llevado al JavaScript, con lo que el plugin resulta notablemente más fluido, rápido y cómodo.

Una de las novedades más importantes, es que los filtros se almacenan en forma de archivo XML (excepto los considerados del “núcleo” de Imaset). Esto tiene tres ventajas:

La administración de filtros es sencilla, basta con borrar el filtro que no quieres, o subir por FTP uno nuevo
Si quieres disfrutar de un nuevo filtro, basta con subir un pequeño archivo.
Los programadores no tienen que entender cómo funciona interiormente imaset. Los filtros están muy estandarizados, y resulta muy fácil crear nuevos, siguiendo la API que próximamente será publicada.

Por último, recordar que el plugin estará disponible en algunos idiomas. En principio en Español, Inglés, Chino, Italiano y Rumano. Por defecto el plugin se muestra en inglés, pero puede modificarse muy fácilmente en settings.php

Este fin de semana se realizarán los beta-testeos y las traducciones oportunas, y muy pronto será el estreno mundial.

P.D.: También guardo otra pequeña sorpresa sobre Imaset, pero tendréis que esperar un poco más para conocerlo.

Fin de los ojos rojos (redeye) con Gimp

José Cabo — Thu, 04 Oct 2007 20:09:49 +0000

A veces haciendo una fotografía, al usar el flash, las pupilas de nuestros ojos se vuelven de color rojo o naranja y llega a dar una sensación de “vampiro”, algo extraña y muchas veces rozando lo ridiculo… Hay muchas formas de eliminar ese rojo, o al menos ocultarlo, de forma que la vista del fotografiado sea más agradable.

Usando el programa The Gimp podemos solucionar este problema de forma rápida con solamente seleccionar con un rectángulo la parte afectada y aplicando el plugin.

El plúgin Redeye en su versión 0.3 (solo para Linux) y 0.2 (para Linux y Windows) se puede descargar por “registry” de plugins para Gimp.
Para compilar (e instalar) ejecutar en la consola de Linux:
$ gimptool-2.0 --install redeye.c

Un ejemplo:

La primera imagen es la original; la segunda la retocada con los valores personalizados (los cuales recomiendo) 50, 50, 0; y la tercera está hecha con los valores “automáticos” del plugin (un poco… débiles).