Soweit ich dieses Problem analysiert habe, habe ich erfahren, dass es um die Konvertierung von SVG in PNG geht (SVG -> Canvas -> PNG). In diesem Fall funktioniert html2canvas möglicherweise nicht gut.
Warum in diesem Fall nicht html2canvas passen:
Seit Highcharts Verwendung von SVG machen die Grafiken und Diagramme zu machen, bedarf es svg umgewandelt wird anstelle von HTML auf der Leinwand. html2canvas ist ein sehr guter html to canvas converter, aber es scheint, dass es not designed to convert svg's oder may render faulty war.
Bei der Suche nach Google stieß ich auf etwas namens Canvg, von dem ich dachte, es könnte Ihnen helfen. Also ich habe es codiert und es hat geklappt.Im Folgenden werde ich das Code-Snippet angebracht haben, die, wenn Sie können Sie verwenden möchten:
<html>
<head></head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.svg.js"></script>
-->
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
<div id="sharedOne">
<div id="container"></div>
<button class="clickGrn">
GENERATE IMAGE
</button>
</div>
<div id="img">
<img id="newimg">
</div>
<script>
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
/*
YOU SHALL REPLACE THE FOLLOWING CODE WITH THE CODE PROVIDED BELOW
=================================================================
$("body").on("click", ".clickGrn", function() {
alert("Calll");
html2canvas($("#sharedOne"), {
allowTaint: true,
onrendered: function (canvas) {
canvg('canvas', canvas);
var imgsrc = canvas.toDataURL("image/jpg");
console.log(imgsrc);
$("#newimg").attr('src', imgsrc);
}
});
});
*/
$("body").on("click", ".clickGrn", function() {
var canvasSharedOne = document.createElement("canvas");
var HighChartsSVG=$('#container').find('svg')[0].outerHTML;
canvg(canvasSharedOne, HighChartsSVG);
var imgsrc = canvasSharedOne.toDataURL();
document.getElementById('newimg').src = imgsrc;
});
</script>
</body>
</html>
Aber ja, noch konnte ich versuche, die neueste Version von html2canvas zu verwenden, die eine zusätzliche html2canvas.svg.js enthält, aber nicht herausfinden, wie man Verwenden Sie es, da der Ersteller die Bibliothek von Grund auf neu geschrieben hat. Außerdem hat er angegeben, dass SVG-Rendering-Unterstützung hinzugefügt wird. Beim Lesen des Codes denke ich, dass er FabricJS für Canvas-Unterstützung verwendet hat.
Da es neu ist, können wir keine Codebeispiele erwarten, da es noch in der Entwicklungsphase ist.
Wenn ich den Code unten ich eine Fehlermeldung erhalten:
haben Sie überprüft, was 'canvas' Wert nach' var Leinwand = document.getElementById ('sharedOne'); '? –
Entweder Ihr #sharedOne-Div existiert nicht oder ist kein HTML-Canvas-Element. –
@henriqueromao Ja, ich überprüfe Leinwand Wert. es ist nur return html –