Sv Community El Salvador

Soporte y Tecnología => Programación => Scripts => Mensaje iniciado por: mxgxw en diciembre 12, 2012, 09:14:09 am

Título: Convirtiendo SVG en PNG programáticamente
Publicado por: mxgxw en diciembre 12, 2012, 09:14:09 am

Como algunos sabrán abrí nuevamente mi Blog de programación  :dumb:

Les dejo el link a la última entrada, lo dejo aca en vez de que se pierda en los links. Espero les sea de utilidad

Convirtiendo Gráficos Vectoriales (SVG) en PNG programáticamente  (http://fuenteabierta.teubi.co/2012/12/convirtiendo-graficos-vectoriales-svg.html)

Extracto:

Citar

Convirtiendo Gráficos Vectoriales (SVG) en PNG programáticamente

Trabajando en unas cosas de la oficina me vi en la necesidad de desplegar la información de tendencias de precios en una página web; Sinceramente, no soy nada amigo de Flash, necesitaba algo estándar, que tuviera la posiblidad de agregar interactividad y que al mismo tiempo me permitiera trabajar directamente con los datos en vez de tener que hacer todo a mano. Buscando un poquito en google me topé con d3js - Data-Driven Documents.

d3js es una biblioteca de Javascript que permite crear visualizaciones de datos de una manera un poco fuera de lo común usando Gráficos Vectoriales Redimensionables(SVG). En esta entrada no pretendo explicar como usar d3js sino cómo resolver la siguiente pregunta que me hizo un usuario luego de ver las gráficas que había generado con esta herramienta:

¿Se puede descargar la gráfica?

(http://4.bp.blogspot.com/-srrnz6c_C9M/UMiZZ3650QI/AAAAAAAAC50/NUvj0Ad4oQ4/s320/prices.png)

Continua.... (http://fuenteabierta.teubi.co/2012/12/convirtiendo-graficos-vectoriales-svg.html)

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: hkadejo en diciembre 12, 2012, 02:03:15 pm

 :offtopic:

Soy yo o el avatar de Sam V (el que comenta en el post) ¿no es el mismo de ~?  :yao_ming:

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: Camus de Acuario en diciembre 12, 2012, 02:13:02 pm

Cita de: hkadejo en diciembre 12, 2012, 02:03:15 pm

:offtopic:

Soy yo o el avatar de Sam V (el que comenta en el post) ¿no es el mismo de ~?  :yao_ming:

Es ~
Si te fijás en los links que pone, son los de su página web sin estilo del buen gusto.

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: mxgxw en diciembre 12, 2012, 02:24:06 pm

Cita de: hkadejo en diciembre 12, 2012, 02:03:15 pm

:offtopic:

Soy yo o el avatar de Sam V (el que comenta en el post) ¿no es el mismo de ~?  :yao_ming:

El mismo =/

Lo triste es que leyendo sus comentarios esperaba encotrar algo que me fuera de utilidad dentro de los links que puso para adicionar a la entrada. Algo que resultó en una actividad completamente infructuosa.

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: g00mba en diciembre 12, 2012, 02:37:27 pm

hey no sean tan hechos M, el pobre bicho no haya con quien compartir su palomada.
(http://i3.kym-cdn.com/entries/icons/original/000/003/619/Untitled-1.jpg)

interesante el asunto de la conversion, por cierto.

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: vlad en diciembre 13, 2012, 06:49:05 am

En esta pagina usan un metodo similar (aunque con PERL en el lado del servidor):
http://d3export.cancan.cshl.edu/

Sin embargo lo que queria comentar es que talvez te puede servir este fragmento, ya que practicamente reemplazaría tu funcion toXML(element) (y de alguna forma tiene que colaborar con el desempeño cuando sean SVGs complejo, digo, siendo una implementación nativa):

// Get the d3js SVG element
var svg = document.getElementById("ex1");
// Extract the data as SVG text string
var svg_xml = (new XMLSerializer).serializeToString(svg);

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: mxgxw en diciembre 13, 2012, 07:35:28 am

Cita de: vlad en diciembre 13, 2012, 06:49:05 am

En esta pagina usan un metodo similar (aunque con PERL en el lado del servidor):
http://d3export.cancan.cshl.edu/

Sin embargo lo que queria comentar es que talvez te puede servir este fragmento, ya que practicamente reemplazaría tu funcion toXML(element) (y de alguna forma tiene que colaborar con el desempeño cuando sean SVGs complejo, digo, siendo una implementación nativa):

// Get the d3js SVG element
var svg = document.getElementById("ex1");
// Extract the data as SVG text string
var svg_xml = (new XMLSerializer).serializeToString(svg);

Hola vlad, fijate que lo implementé a mano por dos razones:

1-Era bastante sencillo
2-Trabajando directamente con DOM es prácticamente cross-browser.

El problema de utilizar algo como XMLSerializer es que por ejemplo no hay una implementación para IE < 9.

Aunque sí :) Gracias por la info, lo voy a agregar en la entrada como opción alternativa, siempre mantuve el toXML en el prototipo de Element para mantener el "dryness" del código

Citar

+Agregado 13/12/2012:

Gracias a la sugerencia de vlad tenemos una implementación alternativa compatible con casi todos los navegadores (Exceptuando IE<9). En este caso podemos utilizar la clase XMLSerializer para extraer el código SVG. En nuestro caso tendríamos algo como lo siguiente:

Código: [Seleccionar]

Element.prototype.toXML = function() {
  return (new XMLSerializer).serializeToString(this);
}

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: vlad en diciembre 13, 2012, 08:08:59 am

Tenes razon con lo de la compatibilidad, me imagino que si para alguien el desempeño de la función nativa llegara a ser necesaria y a la vez fuera prioridad mantener la portabilidad siempre podría hacer un if( !window.XMLSerializer) y usar una u otra alternativa :)

Esta interesante este código y me cae en buen momento ya que tengo pendiente en un proyecto poder guardar los graficos que produce el API de Google Chart Tools (https://developers.google.com/chart/)

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: mxgxw en diciembre 13, 2012, 09:39:23 am

Cita de: vlad en diciembre 13, 2012, 08:08:59 am

Tenes razon con lo de la compatibilidad, me imagino que si para alguien el desempeño de la función nativa llegara a ser necesaria y a la vez fuera prioridad mantener la portabilidad siempre podría hacer un if( !window.XMLSerializer) y usar una u otra alternativa :)

Esta interesante este código y me cae en buen momento ya que tengo pendiente en un proyecto poder guardar los graficos que produce el API de Google Chart Tools (https://developers.google.com/chart/)

Yo ya había usado Google Charts en otras ocasiones. Lo que no me gusta es que Google de un dia para a otro saca una nueva versión de las APIs y toca migrar todo. Lo bonito de d3js es que simplemente descargas el JS y ya :) sin preocupaciones de que luego Google cambie de parecer y decida no seguir apoyando una versión específica de una biblioteca.

La otra razón es pq se pueden hacer cosas bien fumadas jajajaja nada mas hay que ver la página de ejemplos que tienen :)

Modificado:

Ya logré actualizar el python del server, les dejo el "demo" :) Este tiene un pequeño sistema de "prevención de abuso" hahahaaha Yo se que aquí se lo pueden saltar facilmente ;)

http://dev.teubi.co/d3js-examples/svg2png/ (http://dev.teubi.co/d3js-examples/svg2png/)

Pueden ver como el PNG resultante las fuentes aparecen un poco más grandes que en la página. Realmente no hay mucho que se pueda hacer más que trabajar el estilo de las etiquetas SVG antes de realizar el proceso de conversión.

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: vlad en diciembre 13, 2012, 02:14:43 pm

La imagen resultante te la esta dejando con fondo transparente, bug or feature?  :yao_ming:

Título: Re:Convirtiendo SVG en PNG programáticamente
Publicado por: mxgxw en diciembre 13, 2012, 02:25:44 pm

Cita de: vlad en diciembre 13, 2012, 02:14:43 pm

La imagen resultante te la esta dejando con fondo transparente, bug or feature?  :yao_ming:

"Feature" xD El SVG original también es transparente, mirá lo que pasa cuando cambio el color de fondo a la página ;)

(http://dev.teubi.co/d3js-examples/svg2png/transparent_svg.png)