¿Combina SVG y .JPG en una imagen?

Tengo un sitio web que usa la configuración SVG/VML (a través de Raphael JS) en una aplicación de mapeo donde el SVG se usa para mostrar gráficos sobre una imagen de mapa de fondo. Esto funciona muy bien en pantalla, y para imprimir mapas impresos con superposiciones. Sin embargo, esta configuración se desmorona cuando el usuario desea guardar la imagen del mapa con la superposición SVG en un archivo .JPG local.¿Combina SVG y .JPG en una imagen?

Más específicamente, utilizando el estándar de funcionalidad de botón derecho del ratón de la mayoría de los navegadores a "Guardar imagen como ..." no funciona cuando hay un/SVG elemento VML sentado encima de la imagen. Haga clic derecho en el mapa, y el usuario puede guardar la imagen del mapa, pero sin la superposición. Haga clic derecho en el elemento SVG superpuesto, y lo mejor que obtiene el usuario es la capacidad de inspeccionar el elemento o guardar algo de HTML (varía según el navegador).

Así que mi pregunta principal aquí es; ¿Es posible tomar una imagen y un elemento SVG y combinarlos (preferiblemente del lado del cliente, aunque estoy abierto a opciones) en una imagen "aplanada", .JPG, .PNG o de otra manera, que luego se puede hacer clic derecho y guardado, o descargado a la PC de un usuario a petición?

Fuente

2012-03-29 theDom

opciones no incluyen ImageMagick? http://www.imagemagick.org/script/magick-vector-graphics.php – PinnyM

Posibles duplicados: http://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client -side http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser/3976034#3976034 – JayC

Estoy buscando en la extensión Imagick de PHP para posiblemente lograr lo que intento hacer En cuanto a los posibles hilos duplicados, los he analizado a ambos, y la dependencia de Canvas y la falta de IE lo hace difícil para lo que se supone que es una aplicación independiente del navegador.Ese y ambos subprocesos abordan solo la conversión del propio SVG a un gráfico, no la fusión de dicho gráfico SVG y otro en una sola imagen. – theDom

Lo que hay que hacer es, en lugar de superponer JPG y SVG:

Tome la imagen original
Dibujar las líneas en el archivo SVG en él en la memoria
salida que sola imagen como un JPG para el navegador.

Por supuesto, esto significa que usted tiene que ser capaz de interpretar SVG ...

Fuente

2012-03-29 15:30:01

Ok ... ¿es posible usar JavaScript estándar del lado del cliente, o alguna otra cosa en el servidor? No estoy seguro de lo que quiere decir con dibujar las líneas en la imagen "en memoria" – theDom

El dibujo no se hace en el navegador (como lo haría con JavaScript), sino en el servidor en el proceso que maneja la solicitud. –

Una posibilidad sería la de incluir la imagen en el SVG, y luego generar una URL de datos con las imágenes combinadas. El siguiente ejemplo lo logra en formato png:

var datauri = c.toDataURL('image/png');

donde c es la capa SVG formateada. Para obtener más información, consulte este editor de código abierto, http://code.google.com/p/svg-edit/, en los archivos svgcanvas.js y svg-editor.js, que es un buen ejemplo de cómo exportar SVG como un archivo png. Es un poco difícil de entender al principio, pero está muy bien escrito.

Fuente

2012-03-30 23:56:20 Jlange

Me temo que vas a tener dificultades tratando de renderizar SVG en un elemento Canvas así por las limitaciones de seguridad (no podría hacerlo funcionar en Firefox, por ejemplo).

He aquí una idea sin embargo:

lugar de su imagen en el interior del SVG DOM utilizando el SVG <image> etiqueta
pasar su código SVG a través de la canvg biblioteca
Uso del toDataURL método de canvg a generar la imagen

Fuente

2012-04-01 20:08:17 Emil

¿Combina SVG y .JPG en una imagen?

Respuesta

Cuestiones relacionadas