Delirios de un Informático

Aumentar el tamaño del lienzo de un bloque de imágenes

Me acabo de topar con una enorme cantidad de imágenes que tienen todas un tamaño distinto pero que tienen una proporción entre sí. Debido a que deben mostrarse en un espacio de tamaño fijo, el aplicar las mismas dimensiones a todas provoca distorsiones por lo que lo ideal sería disponer de todas las imágenes con un tamaño idéntico, pero requiere aumentar el lienzo o fondo de la imagen al tamaño de la más grande y centrarla. Por ejemplo, para una imagen de 18x28px habría que aumentarla a 32x32px dejando 7px a izquierda y derecha y 2 arriba y abajo.

Como siempre en los casos que tengo que tratar imágenes en bloque, he recurrido a Imagemagick:

convert img.png -background transparent -gravity center -extent 32x32 ext-img.png

Este comando extiende una única imagen, centrándola y forzando el fondo transparente. Para un bloque de imágenes bastaría con:

for i in *.png; do convert "$i" -gravity center -extent 32x32 "ext-$i"; done;

Pueden verse más opciones en la documentación de Imagemagick :).

Unit PNG Fix: más transparencias en IE6

Como otras alternativas, el hack está programado en JavaScript, pero esta vez, tiene interesantes características:

  • No depende de frameworks como jQuery o Mootools
  • Funciona con etiquetas <img> y con el atributo background-image de CSS
  • Permite elementos con ancho y alto automáticos
  • Es ligero: sólo 999 bytes
  • Muy fácil de usar: basta un <script src=”unitpngfix.js”&gt</script>
  • Funciona automáticamente, no es necesario llamar a funciones o crear objetos

Puede descargarse desde Unit Interactive.