2010-07-28 14 views
5

Estoy escribiendo una aplicación que permite a los usuarios generar imágenes con Raphael.JS. Una de las características secundarias que quiero es generar un PNG del lienzo de Rafael.Programemente genera PNG desde la imagen Raphael.JS

Aquí está la tubería general de mi cabeza:

  1. entradas Parámetros de Usuario
  2. Generamos JS con Raphael llama
  3. Generamos un envoltorio de JS que hace lo anterior y llama .innerHTML en el div que contiene , que nos da SVG (que luego enviamos alguna parte)
  4. ejecutamos la envoltura JS
  5. el SVG es enviado a ImageMagick y fuera aparece un PNG

El paso 4 es el paso sobre el que necesito orientación. El usuario podría estar usando IE; no tenemos garantía de que el JS se ejecute alguna vez en un navegador SVG. En cualquier caso, necesitaríamos que esto se ejecute en el lado del servidor para que sea confiable. Estas son las tres posibilidades que he encontrado hasta ahora:

  • Instale Firefox en el servidor y ejecute el resultado de (3) en Firefox. Esta opción apesta porque instalar FF significa instalar un montón de cosas X en nuestro servidor, ejecutar FF conlleva un montón de sobrecarga, y realmente no quiero perder el tiempo con el seguimiento del proceso y matarlo una vez que lo haya hecho.
  • Use Node.js + jsdom (http://github.com/tmpvar/jsdom). Lo malo aquí es que no está claro qué tan compatible es jsdom, el supuesto sitio, jsdom.org, realmente no existe. Además, no puedo encontrar ninguna documentación.
  • ¿Quizás haga algo con Rhino? Por lo que puedo decir, Rhino tiene aún más apoyo de DOM que Node.

Así que ... las tres de esas opciones tipo de suck. Creo. ¿Estoy equivocado sobre algo? ¿Hay otra manera?

Respuesta

3

Resuelto esto con wkhtmltoimage. Solución fea, pero funciona.

0

Puede probar transforming the VML to SVG on the server antes de ejecutarlo a través de ImageMagick. Sé que el proyecto en sí es PHP, pero la conversión se hace con XSL (el archivo está en el archivo de descarga), por lo que debería ser portátil para cualquier plataforma de servidor.

+0

Genial ... gracias. Eso realmente podría funcionar, aunque mi sentido de Spidey es un hormigueo ante la idea de confiar en la salida del navegador del usuario. No puedo poner mi dedo en el riesgo, pero confiar en ese tipo de cliente corriendo me asusta. ¿Qué piensas? ¿Estoy siendo paranoico?No hay forma de que un usuario cree una imagen de Raphael sin cargar una página en la que se representa, y creo que esperamos que nuestros usuarios tengan JS habilitado ... – rfrankel

+0

@rfrankel Por supuesto, nunca puede confiar en la información del navegador y siempre habrá posibles exploits (en el motor XSLT por ejemplo) incluso con una entrada bien formada, pero creo que validar que tu entrada es de hecho SVG sería un buen comienzo. – robertc

+0

Claro - Ni siquiera estaba pensando realmente en los riesgos de seguridad (que sé cómo manejar) hasta casos límite en los que crearemos correctamente la imagen de Raphael pero no la PNG porque el navegador del usuario hace algo raro o falla o lo que sea. – rfrankel

1

Una vez que tenga su documento SVG serializado en el cliente, todo lo que necesita es un renderizador SVG y/o un rasterizador ejecutándose en su servidor para producir el archivo PNG. No tengo claro qué piensas que hará un contenedor JS, o por qué es necesario. Como el documento SVG que está enviando no contendrá contenido dinámico, todo lo que necesita es enviar el documento serializado SVG a un rasterizador en el servidor para rasterizarlo como PNG.

El renderizador/rasterizador SVG podría ser simplemente un script CGI que llama a ImageMagick, o podría ser algo más sofisticado. Personalmente, recomendaría configurar un servlet que ejecute Apache Batik, que incluye un SVG Rasterizer, y se puede llamar mediante programación. Una búsqueda rápida en Google indica que esta es una tarea bastante común para Batik: http://www.mail-archive.com/[email protected]/msg06116.html

Cuestiones relacionadas