Guardar svg imagen representada por un javascript en el disco local como archivo .png

Question

Soy nuevo en SVG y no un usuario avanzado de JavaScript. Tengo una página web con contenido svg representado dinámicamente por javascript. En Internet Explorer, cuando hago clic derecho en el contenido svg, aparece la opción "Guardar imagen como" y puedo guardar el contenido como png o svg.

Cómo lo hago programáticamente al tener un botón y permitir que el usuario guarde el contenido en png en su máquina.

Answer 1

De mi investigación no hay forma de hacer esto sin enviar el contenido svg a su servidor y hacer que devuelva los datos para guardarlos como una descarga de archivos.

Sin embargo, incluso esto es difícil de lograr con una sola solicitud de estilo AJAX y la solución es increíblemente intrincada. Otros han vinculado a otras publicaciones que explican esto, pero ya he respondido las mismas respuestas y ninguna de ellas lo explica muy bien.

Estos son los pasos que han trabajado para mí:

1. Uso de JavaScript para serializar el contenido SVG.

   var svgString = new XMLSerializer().serializeToString(svgElement);

2. Crear una oculta iframe cuya src es la url presentar. Déle un id.
3. Crear un input oculto. Establezca el value de este input en el contenido SVG serializado.
4. Cree un formulario cuyo objetivo sea el id dado al iframe, y cuyo action es el URL de envío. Coloque el input dentro del form.
5. Envíe form.

6. En su servidor, utilice las herramientas que estén disponibles (no utilizo .NET para que esté solo aquí ...) para convertir el documento SVG a PNG. Enviar el contenido PNG vuelta al cliente, asegurándose de utilizar los encabezados:

   Content-Type:image/png

   Content-Disposition:attachment; filename=mypng.png

El navegador debe iniciar una descarga de archivos en el contenido devuelto, aunque esto es browser- depende y no estoy seguro, pero algunos navegadores pueden optar por abrir imágenes en una nueva pestaña en lugar de abrir un cuadro de diálogo de descarga.

Aquí hay una función (imperfecta) que hará el trabajo de AJAX (utiliza JQuery, pero debe tener la idea). data es el SVG serializado:

function ajaxFileDownload(url, data) { 
    var iframeId = "uniqueIFrameId";  // Change this to fit your code 
    var iframe = $("#" + iframeId); 

    // Remove old iframe if there 
    if(iframe) { 
     iframe.remove(); 
    } 

    // Create new iframe 
    iframe = $('<iframe src=""' + url + '"" name="' + iframeId + '" id="' + iframeId + '"></iframe>') 
     .appendTo(document.body) 
     .hide(); 

    // Create input 
    var input = '<input type="hidden" name="data" value="' + encodeURIComponent(data) + '" />'; 

    // Create form to send request 
    $('<form action="' + url + '" method="' + 'POST' + '" target="' + iframeId + '">' + input + '</form>') 
     .appendTo(document.body) 
     .submit() 
     .remove(); 
} 

Tenga en cuenta que esta URL a codificar el contenido SVG, por lo que tendrá que descifrar en su servidor antes de la conversión a PNG.

También tenga en cuenta que si ha definido estilos para su SVG en una hoja de estilo externa, no se serializarán. Decidí poner todos los estilos en línea en los elementos como presentation attributes por este motivo.

Espero que esto ayude.