如何将 Jchartfx svg 图表导出到 canvas

Question

我尝试使用 html2canvas.js 将 jchartfx 导出到 canvas，但它仅将其他属性转换为 canvas，但 svg 元素显示为空白区域。这是我的代码。

 <%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Using an existing canvas to draw on</title>
        <style>
            canvas {
                border: 1px solid black;
            }
            button {
                clear: both;
                display: block;
            }
            #content {
                background: rgba(100, 255, 255, 0.5);
                padding: 50px 10px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/jchartfx.attributes.css" />
    <link rel="stylesheet" type="text/css" href="css/jchartfx.palette.css" />

    <script type="text/javascript" src="./js/jchartfx/jchartfx.system.js"></script>
    <script type="text/javascript" src="./js/jchartfx/jchartfx.coreVector.js"></script>
    <script type="text/javascript" src="./js/jchartfx/jchartfx.advanced.js"></script>


    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/exportLibrary.js"></script>


    <style>
    .exportChart{}
    .exportTable{max-width:700px;border:1px solid blue; margin:2px;}
    </style>
    <script type="text/javascript" >

        var chart1;

        function loadChart(){        

              chart1 = new cfx.Chart();

              chart1.setGallery(cfx.Gallery.Pie);
              var title;
              title = new cfx.TitleDockable();
              title.setText("Sample Demo");
              chart1.getTitles().add(title);
              var divHolder = document.getElementById('ChartDiv1');
              PopulateCarProduction(chart1);
              chart1.create(divHolder);


          }

    function PopulateCarProduction(chart) {
            var items = [{
                "Proportion": 70,
                "Month": "Jan"
            }, {
                "Proportion": 30,
                "Month": "Feb"
            }];


            chart.setDataSource(items);
        }
    </script>

    </head>
    <body onload="loadChart()">
    <div><h1>HTML content to render:</h1>
        <div id="content">
        <div class="exportChart" id="ChartDiv1" style="width:600px;height:400px"></div>

    <div class="exportTable" id="TableDiv1" style="width:600px;">
    <table id="table1" >
    <tr><th style="color:#f0f">1Column one</th><th>Column Two</th><th>Column one</th><th>Column Two</th><th>Column Two</th></tr>
    <tr><td>Data11</td><td>Data12</td><td>Data11</td><td>Data12</td><td>Data12</td></tr>
    <tr><td> Data21</td><td>Data22 </td><td> Data21</td><td>Data22 </td><td>Data22 </td></tr>
    <tr><td> Data31</td><td>Data32 </td><td> Data31</td><td>Data32 </td><td>Data32 </td></tr>
    </table>
    </div>
    </div>
    </div>
    <h1>Existing canvas:</h1>
    <canvas width="1000" height="800"></canvas>
    <script type="text/javascript" src="tableexport/html2canvas.js"></script>
    <button>Run html2canvas</button>
    <script type="text/javascript">
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");



        document.querySelector("button").addEventListener("click", function() {
            html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
                console.log('Drew on the existing canvas');
            });
        }, false);

    </script>
    </body>
    </html>

table 被转换成 canvas 但 svg 没有被转换。我需要将 svg 转换为带有样式的 canvas。

这是生成的输出。

Answer 1

这是由于安全限制。如果 SVG 包含任何外部引用（foreignObject，例如图像数据，css 等），浏览器将不允许绘制 SVG。

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder [Blob] object URLs or data: URIs.

[...]

Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.

Source

您始终可以将 SVG 本身保存为图像，或者如果绝对需要，使用例如 canvg.[=13 之类的库对其进行解析=]

如何将 Jchartfx svg 图表导出到 canvas

How to export Jchartfx svg chart to canvas

html

javascript

svg

canvas

html2canvas