Guardar la aplicación de dibujo de lienzo HTML5 como un archivo SVG
Estoy desarrollando una aplicación de dibujo en lienzo y quiero poder exportar la imagen como archivo SVG. Ya realicé la función para guardar la imagen como archivo PNG, pero estoy teniendo problemas con la parte de SVG. ¿Puedes ayudarme por favor?
Este es el código HTML para el botón de guardar la imagen como PNG:
<div class="wrapper"></div>
<div class="toolbar">
<a href="#" id="save" onclick="SaveImage()">
<img src="save.png">
</a>
</div>
<canvas id="my-canvas" width="800" height="500"></canvas>
<div id="toolbar2">
<a id="img-file" download="image.png">
<button onclick="download()" type="button" class="button">Guardar como PNG</button>
</a>
</div>
Y este es el JS:
function SaveImage(){
var imageFile = document.getElementById("img-file");
imageFile.setAttribute('download', 'image.png');
imageFile.setAttribute('href', canvas.toDataURL());
}
Por favor ayuda. No se me permite usar otras bibliotecas de JavaScript.
davy.ai
Para exportar la imagen como un archivo SVG, puedes hacer lo siguiente: