Galeria de imagenes con vistas previas

rockpok2 · #1 (**permalink**) 03/04/2011, 20:13

Que tal ,
Bueno amigos se me ha presentado un problema , estoy desarrollando una web en la que se genera una galeria de imagenes con las fotos seleccionadas por el usuario.
Hasta alli no hay problema , yo mismo lo puedo generar , pero como haria Si este servicio es de pago osea no puedo mostrar el resultado hasta que se suscriban.

Podria ser :

Mostrar una vista previa del resultado (Screeshot , etc).
Mostrar resultado convertido en una sola imagen con marca de agua.

Y claro tambien tendria que guardar el codigo generado en mi base de datos para posteriormente con mi cuenta de administrador poder ver la galeria de los usuarios.

Alguien podria darme una mano por favor , o tal vez una mejor idea de como lo podria manejar.

Kamae · #2 (**permalink**) 04/04/2011, 03:20

Buenas!

Si haces lo primero, tiene que estar bien montado, ya que si te cazan el link directo a la imagen podrán descargársela o verla. La idea sería tener todas las imágenes fuera de las carpetas públicas o publicadas, es decir, que las imágenes estén en la parte privada del servidor, donde no se tiene acceso desde internet. Por ejemplo si tu hosting tiene las carpetas cgi, etc, www..., y por lo tanto la parte publicada es /www, pon las imágenes en /img en vez de /www/img como se hace normalmente. Eso hará que nadie pueda acceder a tus fotos porque ya no están en la parte pública. Luego tus archivos PHP sí que tienen acceso localmente a esas imágenes y podrás cargarlas en una página, haciendo un simple <img>, verificando previamente si ese usuario está o no suscrito para ver las imágenes.

Código PHP:

  // Suponiendo que estás en /index.php
// Lo pongo sin < > porque la web me añade un link de forosdelweb por la cara :S
img src="../img/foto.jpg"

La segunda opción de la marca de agua es siempre la más fácil (aunque con Photoshop es muy fácil quitar las marcas de agua, siempre según lo basta que sea la mancha)... Pero si vas a tener unas con marca de agua y otras sin (para los suscritos) tendrás el mismo problema que he descrito antes, tienes que vigilar que no te cacen el link.

Espero que te sirva

Saludos

rockpok2 · #3 (**permalink**) 04/04/2011, 05:23

Que tal ,

Kamae gracias por tu respuesta , pero eso me servira una vez ya halla logrado hacer lo que pregunto osea :

Mi pagina es de creacion de de galerias de imagenes con imagenes selccionadas por el usuario.

Mejor dicho como podria hacer esto en PHP

Mostrar una vista previa del resultado (Screeshot , etc).
Mostrar resultado convertido en una sola imagen con marca de agua.

Debido a que para que los usuarios vean el resultado final , se tendrian que suscribir.

Gracias

Kamae · #4 (**permalink**) 04/04/2011, 09:56

Buenas de nuevo

No sé si he acabado de entender tu duda. ¿Lo que quieres es que, según unas variables (nombre de usuario, imágenes elegidas...), se genere una imagen del resultado para tú poderla enseñar al usuario cómo quedaría si se suscribiera, y que ésta imagen generada sea con marca de agua? En caso de ser esto no tengo ni idea, lo siento!

rockpok2 · #5 (**permalink**) 04/04/2011, 14:20

ASI es bueno lo de generar , ya lo he logrado , lo que quiero es poder mostrar un screenshot de eso o si no una imagen con marca de agua , ya cuando el usuario se suscriba recien puede ver el contenido real.

Espero que alguien me pueda ayudar

Kamae · #6 (**permalink**) 05/04/2011, 04:16

Mmmm, hombre, una de las formas que puedes hacerlo es usando DIVs y la propiedad CSS z-index. Muestras lo generado tal cual en un div (si tienes formularios los pones como "readonly"), y en otro div con z-index:2; (que estará por encima) haces la marca de agua por ejemplo. Es la única forma que se me ocurre aunque seguro que habrá otras más adecuadas.

Te he hecho esto por ejemplo, un poco cutre pero si te fijas el usuario sólo puede interactuar con la capa de "SUSCRÍBETE", la de atrás queda bloqueada porque está un nivel por debajo, y si por lo que fuera lograran acceder a ella, los campos de los formularios son readonly, el formulario es "de mentira":

Código PHP:

  <html>
<body>
    <div style="width:700px; height:500px; position:absolute; z-index:1">
        Usuario: <input type="text" value="Auron" readonly><br/>
        Contrase&#241;a: <input type="text" value="******" readonly> <input type="button" value="Cambiar" onclick="javascript:void(0);">
        Fecha de registro: <input type="text" value="05-04-2011" readonly><br/>
        Im&#225;genes:<br/><br/><img src="http://ubuntulife.files.wordpress.com/2008/04/space-art-wallpaper.jpg" width="300" height="300"> 
        <img src="http://sp3.fotolog.com/photo/19/34/118/fleta_30/1237233228527_f.jpg" width="300" height="300"><br/><br/>
        <img src="http://www.macoteca.com/wp-content/uploads/2008/11/wallpaper10.jpg" width="300" height="300">
        <img src="http://www.institutourbano.com/wp-content/uploads/2010/06/rapsuus-siempre.jpg" width="300" height="300"><br/>
    </div>
    <div style="width:700px; height:750px; z-index:2; position:absolute; font-size:54pt; text-align:center; color:red;">
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
    </div>
</body>
</html>

Igual te sirve como idea, ya que dices que la imagen previa la tienes generada, bastaría con sustituir todo el código de formulario y tal por la imagen de tu previa y ya está. De todas formas, esto que te cuento no es poner una marca de agua en la foto, aunque a efectos prácticos es casi lo mismo, recuerdo que en el FP nos enseñaron funciones de tratamiento de imágenes y gráficos con PHP y nos enseñaron a escribir en la imagen (marca de agua). Igual Google sabe contarte más jejej

Saludos!

rockpok2 · #7 (**permalink**) 05/04/2011, 06:47

Gracias Kamae ,

Lo tomare en cuenta , aunque el problema es que asi el usuario puede hacer click derecho guadar imagen .

Y ya no tendria sentido suscribirse.

Kamae · #8 (**permalink**) 05/04/2011, 07:28

Hola de nuevo

En Mozilla funciona correctamente, aunque ciertamente en Internet Explorer permitía guardarse las imágenes. A parte de que haciendo lo que te conté de quitar las imágenes de la parte pública (lo cuál hará que sólo puedan guardarse una miniatura a mala calidad), puedes probar más cosas. El problema es que en IE todo lo que no ocupe el "SUSCRÍBETE" sí que permite acceder a lo de atrás, pero basta con ponerle un fondo transparente con CSS para que tenga en cuenta tooodo el div y no deje acceder a lo de atrás.

Código PHP:

  opacity:0.4; // Para Mozilla Firefox
filter:alpha(opacity=40); // Para Internet Explorer

Además si en vez de poner las imágenes como <img> las pones como background-image en CSS también es un poco mejor para el bloqueo en IE. Vaya, que ahora está probado y no sé si te sirve o no, pero evita que accedan a la capa de atrás. El código queda así:

Código PHP:

  <html>
<body>
    <div style="width:700px; height:500px; position:absolute; z-index:0;">
        Usuario: <input type="text" value="Auron" readonly><br/>
        Contrase&#241;a: <input type="text" value="******" readonly> <input type="button" value="Cambiar" onclick="javascript:void(0);">
        Fecha de registro: <input type="text" value="05-04-2011" readonly><br/>
        Im&#225;genes:<br/><br/>
        <div style="float:left; width:300px; height:300px; background-image:url('http://ubuntulife.files.wordpress.com/2008/04/space-art-wallpaper.jpg');"></div>
        <div style="float:left; width:300px; height:300px; background-image:url('http://sp3.fotolog.com/photo/19/34/118/fleta_30/1237233228527_f.jpg');"></div><br clear="all"/>
        <div style="float:left; width:300px; height:300px; background-image:url('http://www.macoteca.com/wp-content/uploads/2008/11/wallpaper10.jpg');"></div>
        <div style="float:left; width:300px; height:300px; background-image:url('http://www.institutourbano.com/wp-content/uploads/2010/06/rapsuus-siempre.jpg');"></div><br/>
    </div>
    <div style="width:700px; height:750px; z-index:2; position:absolute; font-size:54pt; text-align:center; color:red; background:#FFFFFF;display:block;opacity:0.4;filter:alpha(opacity=40);">
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
        SUSCR&#205;BETE<br/>
    </div>
</body>
</html>

Saludos

rockpok2 · #9 (**permalink**) 05/04/2011, 09:00

Que tal ,

Kamae gracias por tomarte el tiempo de constestar mis preguntas .

Ese ultimo codigo esta mejor que el anterior , creo que lo voy a utilizar hasta que logre conseguir exactamente lo que quiero , pero una pregunta , igual un usuario con conoocimientos avanzados se puede dar cuenta y conseguir cazar la imagen no ?

Gracias

Kamae · #10 (**permalink**) 05/04/2011, 10:11

Exacto, viendo el código fuente aun pueden ver donde apunta tu imagen.

He estado probando lo de las imágenes fuera de la parte pública porque quería insistirte en que podía ser una buena solución, pero no he conseguido hacerlo. Me carga el ancho y largo de la imagen pero no la muestra, así que he intentado abrir y cargar el contenido de la imagen en una variable, pero si la escupo salen símbolos en vez de interpretarlo. Así que entiendo que PHP no puede hacerlo.

Otra posible opción (no estoy del todo seguro) sería crearte una función que codifique la ruta de las imágenes con Javascript. Por poner un ejemplo tontísimo:

/=0
A=1
B=2
C=3
...

"/img/foto.jpg" sería "0 9 13 7 0 6 15 20 15 . 10 16 7". Evidentemente esto es muy cutre, tendrías que currarte un poco la codificación, no sé, puedes cojer y sumarle el md5() de una palabra que sólo sabrás tú, o meterle multiplicaciones y divisiones. Rollo "url=url+md5("patatas");". Al cargar las imágenes cojes la ruta que te llegue y lo descodificas para obtener de nuevo la información real. Así por mucho que vean el código fuente sólo verán caracteres raros que no sabrán interpretar. Pero para esto creo que tienes que cumplir 2 condiciones: que la función sea javascript, y que esté en un fichero fuera del público para que tampoco puedan abrírtelo y verlo.

No lo he probado, probé con PHP y no pude, pero me interesa el tema porque nunca está de más saberlo. Probaré más cosas y si encuentro te digo.

De todas formas, casi seguro que copiando la imagen real y creando una copia temporal con la mancha incluída (necesitas trabajar con funciones de tratado de imagen desde PHP) serviría, aunque por supuesto, si descubren la ruta real o un suscrito se la facilita a alguien, accederían a ella también.

No sé, prueba a ver de hacer un hilo nuevo especificando el problema éste y a ver si la gente dice algo, porque aquí ya hemos posteado lo suficiente como para que la gente lo mire jejej

Saludos y suerte!

rockpok2 · #11 (**permalink**) 05/04/2011, 10:34

Bueno , gracias de todas formas ,

Solo para completar la idea haber te cuento algo mas o menos , el punto final al que quiero llegar es este.

El usuario crea un collage con 10 imagenes que el carga , luego para obtener el resultado final , tendria que suscribirse .

Es decir las imagenes no las tendria yo inicialmente .