将 HTML5 Canvas 绘图应用程序另存为 SVG 文件

Question

I'm doing a canvas drawing app and i want to be able to export the image as a svg file .I already did the function to save the image as a png file but i have some troubles with the svg part.Can you please help我？ 这是保存 png 图像按钮的 html 代码：

<div class="wrapper">

    <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">Save as PNG</button></a>
</div> 

和 JS：

function SaveImage(){
    var imageFile = document.getElementById("img-file");
    imageFile.setAttribute('download', 'image.png');
    imageFile.setAttribute('href', canvas.toDataURL());
}

请帮助。我不允许使用其他 js 库。

Answer 1

You cannot convert the bitmap image of the canvas directly to SVG (except if the bitmap image like the PNG that you have tried to export is the source of a <image> element in your SVG -- but I guess that that is not the idea ）。

既然这是一个绘图工具，您可能会使用对象和/或其他数据结构维护编辑器的 state。 有了这个假设，整个图像已经以结构化的方式表示。 该结构可用于生成 SVG 图像。 示例：在 canvas 上画了一个圆，颜色、大小和 position: {type: "circle", color: "red", x: 30, y: 56, r: 5} . 这个 object 在 canvas 上绘制为圆弧，但同时也可以变成 SVG <circle>元素。

可能有更多的库可以为您处理这个问题。 fabricjs 可能就是一个例子。 这里我链接到toSVG() function: JSDoc: Class: Canvas 。