Почему диаграмма не сохраняется в формате PNG с помощью html2canvas и canvas2image? - PullRequest
Новая
       300

Почему диаграмма не сохраняется в формате PNG с помощью html2canvas и canvas2image?

0 голосов
/ 31 мая 2019

Почему диаграмма не сохраняется в формате PNG с html2canvas и canvas2image? Это ссылка для моего кода 

<div class="canvas__container" style="width:100%; height:100%">
<button id="btnSave" title="Save as PNG" style="position: absolute; left: 4px; top: 4px;">Save</button>
<div id="myChart1"></div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="//superal.github.io/canvas2image/canvas2image.js"></script>
<script>
$(function() {
    $("#btnSave").click(function() {
        html2canvas($("#myChart1"), {
            onrendered: function (canvas) {
                Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height, "Image_" + Date.now());
            }
        });
    });
});
</script>

1 Ответ

0 голосов
/ 31 мая 2019

Я нашел решение.Поскольку d3pie использует тег svg, вы должны использовать saveSvgAsPng.js для сохранения диаграммы. раствор 

<div class="canvas__container" style="width:100%; height:100%">
<button id="btnSave" title="Save as PNG" style="position: absolute; left: 4px; top: 4px;">Save</button>
<div id="myChart1"></div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//exupero.org/saveSvgAsPng/src/saveSvgAsPng.js"></script>
<script>
$(function() {
    $("#btnSave").click(function() {
        saveSvgAsPng(document.getElementById("myChart1").getElementsByTagName("svg")[0], "plot_" + Date.now(), {scale: 2, backgroundColor: "#FFFFFF"});
    });
});
</script>
...