Guardar contenido div como imagen en el servidor

Question

He estado aprendiendo un poco de jQuery y .Net en VB. He creado una herramienta de personalización de productos que básicamente hace capas de divs y agrega texto, imágenes, etc. en la parte superior de una camiseta.

¡Estoy atrapado en un escenario importante!

Necesito poder convertir el contenido del div que envuelve todos estos divs de texto e imágenes a una imagen plana teniendo en cuenta cualquier CSS que se le haya aplicado también.

He oído hablar de cosas que podría utilizar para capturar la pantalla del contenido de un navegador en el servidor que podría ser posible para pulgares de baja resolución, etc., ¡pero suena un poco problemático! y realmente sería bueno crear una imagen de alta resolución.

También he escuchado cómo convertir el html al lienzo html5 y luego escribir eso ... pero parece demasiado complicado para mí entenderlo y el soporte del navegador es un problema.

¿Esto es posible en .NET?

Tal vez se podría hacer algo con javascript?

¡Se agradecerá cualquier ayuda u orientación en la dirección correcta!

EDIT:

estoy pensando quizá que podría hacer con dos soluciones para esto. Idealmente, terminaría con un jpg/png normal etc. para mostrar en el sitio web, pero también sería muy deseable un archivo de alta resolución listo para imprimir.

Impresora PostScript - He oído hablar de ella, pero estoy luchando por encontrar un buen recurso para entenderla para un principiante (especialmente con black out de wiki). Tal vez podría crear una página html a partir de mi contenido div y enviarla a imprimir a un archivo EPS. ¿Alguien sabe algún buen tutorial para esto?

Answer 1

Hacemos esto ... hace unos 10 años. Curiosamente, la tecnología disponible realmente no ha cambiado demasiado.

actualización - Mejor respuesta

Spreadshirt licencias de su producto: http://blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/

Sólo License. No hagas esto tú mismo, a menos que tengas una experiencia real de manipulación de gráficos e impresión. Yo diría que en el mundo de hoy se ven alrededor de 4,000 a 5,000 horas de tiempo de desarrollo para duplicar lo que hicieron ...Y eso es si tienes dos personas de primer nivel trabajando en ello.

---

Respuesta corta: no pueden hacerlo en html.

Ligeramente más largo contestar:
No funciona en parte porque no se puede tapa de la pantalla del lado del cliente y obtener el nivel de resolución necesaria para la impresión de tipo de producción. La resolución de pantalla moderna suele ser del orden de 100 ppi. Para una impresión decente realmente necesitas algo entre 3 y 6 veces esa densidad. De lo contrario, tendrás mucho pixelado y generalmente se verá como una mierda cuando salga.

una respuesta diferente:
Su mejor apuesta es aprovechar algo así como SVG (Scalable Vector Graphics) y proporcionar un tipo de dibujo superficie para el navegador. Hay varias maneras de hacerlo usando Flash (Spreadshirt.com usa esto) o Silverlight (no recomendado). Usamos flash y fue bastante bueno.

puede ser capaz de salirse con la suya con HTML 5. De todos modos, cualquiera que sea el camino que elija va a ser complicado.

Una vez que el usuario esté satisfecho con su dibujo y quiera imprimirlo, cree el archivo final y ejecute un proceso para convertirlo a Postscript o al formato que necesite su proveedor de camisetas. El convertidor (también conocido como software RIP) tardará mucho tiempo en desarrollarse o costará un montón de dinero ... elija uno. (consejo útil: cómprelo. En aquel entonces, gastamos alrededor de $ 20 mil dólares estadounidenses y era mucho más barato que tratar de desarrollarlo).

Por supuesto, esto ignora problemas como la coincidencia de colores y la calibración. Este fue en realidad nuestro problema principal. El monitor de todos es ligeramente diferente y lo que parece rojo en una máquina es rosa en otra.

Y para un poco de historia, estábamos haciendo papel de regalo personalizado. El usuario agregó texto, seleccionó imágenes de nuestra biblioteca o subió las suyas, y eligió un patrón. Nuestras impresiones salieron en impresoras HP Inkjet de gran formato (36 "y 60" de ancho). Al final gastamos entre $ 200k y $ 300k solo en recursos de desarrollo para hacerlo realidad ... y desafortunadamente, el precio al que teníamos que vender era demasiado alto para el mercado.

Answer 2

Envíe todo el div con contenido generado por el usuario al servidor utilizando una llamada ajax. Genera un documento HTML en el servidor utilizando la clase 'HtmlTextWriter'. A continuación, puede convertir ese archivo HTML usando herramientas externas como

(1) http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot

(2) http://html-to-image.acasystems.com/faq-html-to-picture.htm

que no son herramientas libres, pero se puede utilizar mediante la creación de nuevos procesos en el servidor.

Answer 3

Si puede utilizar alguna herramienta del lado del servidor, marque phantomjs. Este es un navegador web sin cabeza (sin gui) que puede tomar una captura de pantalla de la página, y usa una API de JavaScript. Debería hacer el truco.

Answer 4

La mejor opción que encontré es wkhtmltopdf. Viene con una herramienta llamada wkhtmltoimage. Utiliza QtWebKit (un puerto Qt del motor de renderizado WebKit) para representar una página web y convierte el resultado en formato PDF o de imagen de su elección, todo en el lado del servidor.

Como usa WebKit, procesa todo (imágenes, CSS e incluso javascript) como lo hace un navegador moderno. En mi caso de uso, los resultados han sido muy satisfactorios y son casi idénticos a lo que mostrarían los navegadores.

Para empezar, es posible que desee buscar la forma de ejecutar las herramientas externas en .NET: Execute an external EXE with C#.NET