es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Guardar la aplicación de dibujo de lienzo HTML5 como un archivo SVG

05 Aug, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para exportar la imagen como un archivo SVG, puedes hacer lo siguiente:

    1. Agrega un nuevo botón al código HTML para guardar como SVG:
    <button onclick="downloadSVG()" type="button" class="button">Guardar como SVG</button>
    1. Agrega una nueva función en el código JS para guardar como SVG:
    function downloadSVG() {
    var svgContent = createSVGContent();
    var svgBlob = new Blob([svgContent], {type:"image/svg+xml;charset=utf-8"});
    var svgUrl = URL.createObjectURL(svgBlob);
    var downloadLink = document.createElement("a");
    downloadLink.href = svgUrl;
    downloadLink.download = "image.svg";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}
    1. Agrega una nueva función en el código JS para crear el contenido del SVG:
    function createSVGContent() {
    var canvasData = canvas.toDataURL("image/png");
    var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + canvas.width +
         '" height="' + canvas.height + '"><foreignobject width="100%" height="100%">' +
         '<img src="' + canvasData + '" width="' + canvas.width + '" height="' + canvas.height +
         '"></foreignobject></svg>';
    return svg;
}
    1. Prueba la funcionalidad y realiza los ajustes necesarios.

Comments are closed.