将画布导出为 SVG 文件答案

【问题标题】：Export Canvas to SVG file将画布导出为 SVG 文件
【发布时间】：2021-04-08 00:28:22
【问题描述】：

我正在尝试将包含使用 Chart.js 创建的图表的画布转换为 SVG，以便能够从包含该图表的页面下载 SVG 文件。我已经用谷歌搜索了 5 个小时，我尝试了多个脚本，我得到的最好的一个是 this one 但问题是转换后的 SVG 只包含图表的四分之一，我认为这与图表中的选项有关.js 用于响应式（为了转换为 SVG 应该是 false）。

这是 HTML 文件。

<html>
<body>
<div class="chartContainer">
    <canvas id="radarCanvas" style="height: 600px;width: 600px;"></canvas>
</div>
<a id="down">
<button type="button" onclick="download()">Download</button>
</a>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script type="text/javascript" src="canvas2svg.js"></script>
<script type="text/javascript">
   var graphData = {
        type: 'pie',
        data: {
            labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            datasets: [{
                label: "Population (millions)",
                backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                data: [2478,5267,734,784,433]
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Predicted world population (millions) in 2050'
            },
            animation: false,
            responsive:false,
            maintainAspectRatio: false
        }
    }


    function tweakLib(){
        C2S.prototype.getContext = function (contextId) {
            if (contextId=="2d" || contextId=="2D") {
                return this;
            }
            return null;
        }

        C2S.prototype.style = function () {
            return this.__canvas.style
        }

        C2S.prototype.getAttribute = function (name) {
            return this[name];
        }

        C2S.prototype.addEventListener =  function(type, listener, eventListenerOptions) {
            console.log("canvas2svg.addEventListener() not implemented.")
        }
    }


    var context = document.getElementById("radarCanvas").getContext("2d");

    var radarChart = new Chart(context, graphData); // Works fine

    tweakLib();
    // deactivate responsiveness and animation

    // canvas2svg 'mock' context
    var svgContext = C2S(600,600);

    // new chart on 'mock' context fails:
    var mySvg = new Chart(svgContext, graphData);
    console.log(svgContext.getSvg());
    function download() {
        var dl = document.createElement("a");
        document.body.appendChild(dl); // This line makes it work in Firefox.
        var svg= svgContext.getSvg();
        if (window.ActiveXObject) {
            svgString = svg.xml;
        } else {
            var oSerializer = new XMLSerializer();
            svgString = oSerializer.serializeToString(svg);
        }
        dl.download = "Chart.svg";
        //   return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
        dl.href='data:image/svg+xml;utf8,' + encodeURIComponent(svgString);
        dl.click();
    }

</script>

</html>

【问题讨论】：

我对canvas2svg不熟悉，但自定义canvas实现似乎与Chart.js不兼容。 Chart.js 将像素绘制到画布上，因此您无法真正从中获取矢量。像 d3 或 Vega-Lite 这样的东西可能更适合你想要做的事情。
@Jimmy，谢谢你的推荐，我终于明白了。一杯咖啡总能让你头脑清醒。
您使用的是哪个版本的 canvas2svg？
@user551113 v1.0.19 来自作者 Kerry Liu
感谢您分享您的解决方案！实际上，一位用户发布了 PR 来解决您的这类问题，请参阅：github.com/gliffy/canvas2svg/pull/46 和他在github.com/gliffy/canvas2svg/blob/… 的上下文示例var c2s = new C2S({ctx:wrappedCtx, width:500, height:500});

标签： javascript html jquery svg

【解决方案1】：

愚蠢的我......所有需要添加的是......

mySvg.width=600;
mySvg.height=600; 
//or any size

这些线需要在这些线之后，图表是在 C2S 对象上创建的

...
// deactivate responsiveness and animation

// canvas2svg 'mock' context
var svgContext = C2S(600,600);

// new chart on 'mock' context fails:

var mySvg = new Chart(svgContext, graphData);
//  insert here

【讨论】：