Buenas chicos,
Muchos de nosotros hemos pensado alguna vez: "joder, me encantaría poner este background con fixed y estirado para que ocupe toda la pantalla".
Pues bien, gracias a AJAX, las librerias GD y un par de cosillas de CSS y JavaScript básicas, creé esta noche un script capaz de redimensionar la imagen de mi background-image para el body.
Lo hice de la siguiente manera:
1. Imprimo en pantalla la imagen a redimensionar en un DIV y con IMG, al 100%, con un position: absolute y un z-index: -1
Esto lo hago para poder tener la imagen detrás del body al 100%, y poder así coger las dimensiones que ocupa ésta en pantalla, para luego poder redimensionarla con las librerias GD en el PHP.
2. Cargo un fichero javascript donde inicializo las llamadas onload y onresize a mi función de llamada AJAX.
3. La función AJAX recoje en primer lugar el width y height de la imagen contenida en el DIV, imaginando que las dimensiones son 1012x758, por ejemplo, genero el nombre para mi nueva imagen como: img_1012x758.jpg
4. El PHP redimensiona mi imagen a un nuevo fichero, denominado img_1012x758.jpg y retorna dicho nombre con un echo para el javascript.
5. Cuando vuelve a mi javascript, la funcion REQUEST establece como imagen para el background del body esta nueva imagen.
Bueno, este método no me lo he inventado yo, alguna vez he visto gente que sugería algo así, pero nunca vi de nadie que hubiese puesto código o lo hubiese implementado.
El método es rápido (unos 2segundos o así en poner la imagen), y es limpio (mientras la imagen no está redimensionada para background del body puedo dejar el DIV con la imagen al 100%
Problemas
Aquí viene la parte interesante: los problemas que aún detecto, y son los siguientes, o principalmente uno:
El problema es el número de imágenes que vamos a crear... se supone que admitimos width y height, aún restringiendo a que lo mínimo fuese 200x200 y lo máximo 1500x1500, por ejemplo, y suponiendo que nuestra imagen pudiese ocupar 100KB de media... son (si mis cálculos no fallan) 1300 x 1300 x 100KB = 169GB demasiado para una chorrada como ésta.
Soluciones:
Se me ocurrieron a priori varias soluciones, pero por ahora no he dado con la óptima.
Una de las que probé fue una vez establecida la imagen de background, eliminar dicha imagen con unlink, pero increiblemente.... si hago eso, deja de funcionar el fixed del background, la verdad, no sabía que el navegador recargase la imagen cuando bajábamos con el scroll, creía que la guardaba en la caché.
En fin, qué soluciones se os ocurren a vosotros?
Por supuesto que postearé el código en cuanto lo tenga más ordenado por si alguien le interesa.
Saludos y gracias!!!
