Cómo convertir svg a png usando html5 canvas / javascript / jquery y guardar en el servidor
Bueno, necesito ayuda para convertir un archivo / imagen .svg a un archivo / imagen .png ...
Tengo una imagen .svg en mi página. Se guarda en mi servidor (como un archivo .png). Necesito convertirlo a un archivo .png a pedido (al hacer clic en un botón) y guardar el archivo .png en el servidor (lo haré con una solicitud .ajax).
Pero el problema es la conversión.
Leí muchas cosas sobre el lienzo html5, que probablemente pueda ayudar a hacer lo que necesito hacer ahora, pero no puedo encontrar ninguna solución clara a mi problema y, tbh, no entiendo todo lo que encontré ... Entonces Necesito algunos consejos claros / ayuda sobre la forma en que tengo que hacerlo.
Aquí está la plantilla de "idea html":
<html>
<body>
<svg id="mySvg" width="300px" height="300px">
<!-- my svg data -->
</svg>
<label id="button">Click to convert</label>
<canvas id="myCanvas"></canvas>
</body>
</html>
y algunos js:
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
Luego, necesito dibujar el svg en el lienzo, recuperar los datos de base64 y guardarlos en un archivo .png en mi servidor ... pero ... ¿cómo? Leí sobre tantas soluciones diferentes que en realidad estoy ... perdido ... Estoy trabajando en un jsfiddle, pero en realidad ... no estoy en ninguna parte ...http://jsfiddle.net/xfh7nctk/6/ ... Gracias por leer / ayuda