Convertir un Div a imagen, o guardar div como imagen

[monclee]

Saludos amigos, recientemente termine una aplicacion usando AJAX y HTML.

Basicamente la aplicacion consiste en un fodo. al cual se añaden imagenes a divs que se encuentran "flotando" dentro del div con el fondo..

Con esto logramos cambiar colores y objetos de la imagen. (remplazando la imagen del Div)

Ahora a todo esto .. solo necesito guardar el resultado final.. o convertir ese div a una imagen para tener un link de descarga...

Se que esto es posible con PHP pero no tengo ni idea de como.. nunca he usado la libreria GD que me recomendaron para esto y queria pedirles su ayuda.. hay mucha mala informacion, ya busque en los demas topics pero nada parecido a esto.. o por lo menos no lo encontre

[marcofbb]

Nose si es posible exactamente lo que necesitas, pero podes usar javascript para capturar la pantalla y crear la imagen a partir de esa captura.

Saludos

[monclee]

Sabes como hacer una captura de pantalla en Javascript? yo no

Quiza si estesa bien y baste con darle una eje x , y para que no capture toda la pantalla....

Me podrias dar mas info!!, Muchas gracias

[monclee]

SAludos, la cosa esta asi.-

Tengo un Div donde cargo muchos otros divs, dentro de los cuales hay imagenes..

No es nada complejo digamos que es una tabla (realizada en divs) donde por medio de botones y AJAX cambio las imagenes en los divs..

Ahora necesito que de ese Div donde esta todo se genere una imagen y se guarde..

Me han dicho que el CANVAS en javascript si lo soporta IE6 por ejemplo y no solo los navegadores modernos. yo sabia que canvas era de HTML5 y que IE explorer 9 era el unico de los explorers que podia leerlo.

Bueno espero que alguien tenga alguna idea para convertir mi div en imagen.. ya busque en todos lados, lei en todos los foros en español e ingles y hasta me regañaron por abrir un viejo topic.. ojala alguien me pueda guiar..

De verdad llevo ya 3 dias investigando.. tambien me han dicho de la libreria GD en PHP y ahora mismo tambien estoy desarrollando la investigacion en PHP..

Pero por lo que he investigado es posible con ambas tecnologias.. que opinan

[Panino5001]

Si necesitás soporte para explorer < 9 estás en problemas. Canvas en esas versiones es soportado vía archivos .htc con un pluggin llamado exCanvas. Pero el problema de exCanvas (hasta la versón que conozco por lo menos) es que no dispone del método toDataURL, que es el que produce una imagen a partir de un canvas. Así que si no podés prescindir de soporte para esas versiones, tendrás que buscar una solución del lado del servidor vía la librería GD, ImageMagick o alguna semejante.

[monclee]

Muchas gracias efectivamente tope el excanvas y estaba leyendo el problema que comentas..

Si estoy en problemas pues nunca he usado GD, ni Imagemagick.. como finalmente algun dia lo tengo que lograr..

Si me dieras una guia, o referencia o algo para no tener que buscar dentro de todo GD o Imagemagick te lo agradeceria..

Tambien encontre esto
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/

usando php y java.

Podria editar ese codigo de PHP, para que por dafault este seleccionada toda la imagen.. (es un crop) de esta manera al dar "guardar imagen" genera el "thumbail" o icono que en mi caso seria la imagen XD!!

Bueno es lo mejor que he pensado para no meterme en tantos problemas con el GD saludos

[Panino5001]

Esta página de un amigo es la mejor referencia acerca de GD que puedo darte:
http://www.sargentoweb.com/php_gd/

[monclee]

Gracias, de verdad gracias, me sera de mucha ayuda.,. referente a javascript y en lo del problema de compatibilidad de canvas en IExplorer

Encontre esto

http://www.nihilogic.dk/labs/canvas2image/

y supuestamente me han dicho que si instalo esto podria funcionar en IE

http://onepixelahead.com/2010/05/12/how-to-use-html5-canvas-with-ie6-ie7-and-ie8/

Pero queria saber tu opinion

[Panino5001]

Me parece que sigue sin dar soporte a toDataURL. Tendrías que probarlo.

[marcofbb]

Explícate mejor lo que quered lograr, porque creo que es una pavada y nos estamos complicando :P

[monclee]

Básicamente estoy creando un generador de diseños.. es para poder "maquillar" personajes.. o algo parecido para los avatares de un sitio que estoy haciendo.

es muy sencillo, las primeras partes son simplemente preguntas como hombre?, mujer? etc, es html super básico que simplemente te guía al documento adecuado que no son muchos son 3..

Ahora cada uno de esos generadores de personaje, es una imagen dividida de la cara sin nada, logre hacer una tabla por medio de Divs y asi si le dan clic a los lentes, cargo en el div de los ojos, la imagen donde los ojos ya tienen lentes por medio de AJAX, así que de hecho carga todo perfecto y a una velocidad increíble.

Hasta aqui todo perfecto.. osea yo creo personajes gracias a este metodo y todo funciona fantastico.. el problema esque ahora necesito el ultimo paso..

juntar o pegar todos esos "cuadritos" dentro de la tabla y los divs y ofrecerle la opcion de guardar imagen o de compartir en facebook o lo que sea!, pero ya con una imagen nueva de su personaje..

Saludos y ojala alguien pueda apuntar a algo facil..

En este ejemplo, a partir de un corte o crop generan una imagen.. Me gustaria hacer lo mismo, pero en lugar del crop, simplemente aprender como darle la informacion de seleccionar las imagenes visibles en ese momento, juntarlas y gardar una nueva imagen. Esto lo hacen con GD enviando las coordenadas , de hecho estoy ahora en varias lecturas del tema.. pero como lo mio no es mucho el Php jajaja sufro bastante.

De cualquier manera agradezco de sobremanera su ayuda. es realmente valorada.

saludos


http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

[Panino5001]

Te dejo un par de opciones sin canvas:
1) basadas en GD con envío de coordenadas de imágenes para que estudies el código javascript usado:
http://www.greenpeace.org.ar/juegoriachuelo/
http://lavidatequierelinda.terra.com.ar/
2)Flash: la imagen se genera leyendo los pixeles de un objeto BitmapData:
http://www.tutoriales-flash.com/tutorial.php?id_tuto=39

[monclee]

Wow! muchas gracias eso será de mucha ayuda!, en verdad gracias y bueno si alguien tiene algun otro tip, dato, lo que sea, es bienvenido y ojala esto ayude a alguien mas que busque lograr lo mismo o le sirva de alguna forma

[marcofbb]

http://danielmclaren.com/2008/03/use...-a-flash-movie
http://www.webresourcesdepot.com/scr...t-html2canvas/

Eso es para sacar screenshot con javascript

[monclee]

Ok Gracias marcofbb te comento

EL problema de usar flash,. es que ni las iPads ni los iPhones tendrían acceso a dicha aplicación por el uso de flash,

El problema del html2canvas, es que todas las versiones de IE8 para abajo, no lo soportan.

demonios, como sea sigo investigando, lastima que mis conocimientos de php esten tan mal, incluso en los ejemplos que me dieron para estudiar, muchas de las funciones mas importantes las realizan con php. aunque esta otra es mas java http://lavidatequierelinda.terra.com.ar/ pero no encuentro como lograrlo aun.

[marcofbb]

No se mucho de javascript, pero creo que con javascript podes hacer, o podes enviar un mensaje al webmaster de terra y preguntar como lo hizo