javascript - 将 Canvas 导出到 SVG 文件-6ren

javascript - 将 Canvas 导出到 SVG 文件

转载作者：行者123 更新时间：2023-12-05 06:16:00

29

4

我正在尝试将包含使用 Chart.js 创建的图表的 Canvas 转换为 SVG，以便能够从包含图表的页面下载 SVG 文件。我已经谷歌搜索了 5 个小时，我尝试了多个脚本，我得到的最好的脚本是 this one但问题是转换后的 SVG 仅包含图表的四分之一，我认为这与 Chart.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>

最佳答案

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

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

关于javascript - 将 Canvas 导出到 SVG 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62249315/

29

4

0

文章推荐： reactjs - Prismjs 没有突出显示 React 组件

powershell - Powershell-导出-CSV外循环，仅最后一行被打印/导出
是否可以调整此代码以导出foreach循环外的所有行: 这工作正常(内部循环): $vms = Get-VM | Where { $_.State –eq ‘Running’ } | Select-
webpack - 导出 webpack 包/前置模块。导出？避免节点中的空对象？
我试图将我的 bundle.js 引入我的 Node 服务器，但显然 webpack 包在顶部的所有包代码之前缺少一个 module.exports =。我可以手动将 module.exports
Android库项目——导出
我有一个 android 项目，其中包含一个库项目。在这个库项目中，我包含了许多可绘制对象和动画。问题是，当我将主项目导出为 .apk 时，它包括所有可绘制对象和动画，甚至是主项目中未使用的对象。
导出/导入后Mysql时间卡住
我的一个 mysql 用户以这种方式耗尽了他的生产数据库: 他将所有数据导出到转储文件，然后删除所有内容，然后将数据导入回数据库。他从 Innodb 大表空间中保存了一些 Gig(我不知道他为什么这样
Pimcore 导入/导出
我正在 pimcore 中创建一个新站点。有没有办法导出/导入 pimcore 站点的完整数据，以便我可以导出 xml/csv 格式的 pimcore 数据进行必要的更改，然后将其导入回来？最佳答案
静态函数的 DLL 导出
我有以下静态函数: static inline HandVal StdDeck_StdRules_EVAL_N( StdDeck_CardMask cards, int n
找不到 TypeScript 导出
因为我更新了 angular cli 和 nestjs 版本，所以我收到了数百条警告，提示我无法找到我的自定义类型定义和接口(interface)。但是我的nestjs api仍然可以正常工作。我正
Eclipse - 导出/保存搜索结果
Eclipse 的搜索结果 View 以其树状结构非常方便。有没有办法将这些结果导出为可读的文本格式或将它们保存到文件中以备后用？我试过使用复制和粘贴，但生成的文本格式远不可读。最佳答案不，我认
javascript - 我如何在React中选择导入/导出
我想在用户在 Chrome 中打开页面时使用 WebP否则它应该是 png。我找到了这段代码: var isChrome = !!window.chrome && !!window.chrome.w
azure - 用户上次登录 - 导出
您好，我正在尝试根据“上次登录”导出 AD 用户列表我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
amcharts - 导出 AM 股票图表
有没有办法启用 Stockchart 的导出？我知道这对于普通图表是可行的，但对于股票图表，当尝试启用导出模式时，我得到了未定义，我尝试过:chart.export.enabled=true;和ch
Magento 订单导入/导出
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
Oracle 使用命令行导入/导出
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
azure - 用户上次登录 - 导出
您好，我正在尝试根据“上次登录”导出 AD 用户列表我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
Django pdf 导出
我想生成一个 PDF，它将以表格格式显示查询集的输出，例如: query = ModelA.objects.filter(p_id=100) class ModelA(models.Model):
Java2Word 导出，单独格式化表格单元格
我有一个数据库代理，可以从 IBM Notes 数据生成 Word 文档。我正在使用 Java2Word API 来实现此目的，但不幸的是，该 API 几乎没有文档，而且我找不到任何有关表格格式(大小
Java 导出 - 文本文件
我尝试将 Java 程序从 Eclipse 导出到 .jar 文件，但遇到了问题。它运行良好，但由于某种原因它没有找到它应该从中获取数据的文本文件。如果有人能帮忙解决这个问题，我将非常感激。最佳答案
Oracle 使用命令行导入/导出
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
clang - 在Web程序集中生成内存和表导入/导出
使用LLVM / Clang编译到WebAssembly的默认代码生成将导出内存，并完全忽略表。使用clang（--target=wasm32-unknown-unknown-wasm）定位Web组
Oracle DDL 导出
我正在尝试在 HSQL 数据库中重新创建一个 oracle 数据库。这是为了在本地开发人员系统上进行更好的单元测试。我需要知道的是，是否有任何我可以在 oracle 服务器/客户端中使用的工具/命

首页

博学

6Ren·AI

商城

javascript - 将 Canvas 导出到 SVG 文件