Question

我尝试使用html2canvas.js将jchartfx导出到画布，但它只将其他属性转换为画布，但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>

表转换为画布但svg未转换。我需要将svg转换为带样式的画布。

这是生成的输出。 Output screen

Answer 1

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

出于安全考虑，Gecko对SVG内容施加了一些限制   当它被用作图像时：


无法加载外部资源（例如图像，样式表），但如果通过BlobBuilder [Blob]对象URL内联，则可以使用它们   data：URIs。

[...]


请注意，上述限制仅适用于图片上下文;他们   直接查看SVG内容或嵌入SVG内容时不适用   通过＆lt; iframe＆gt;，＆lt; object＆gt;或＆lt; embed＆gt;作为文档元件。

Source

您可以随时将SVG本身保存为图像，或者如果是绝对要求，则使用例如 canvg 等库来解析它。

如何将Jchartfx svg图表导出到画布

1 个答案: