Chart’ları PNG olarak Kaydetmek
Jul 25, 2017 · 1 min read

Arkaplanda oluşturduğunuz Chartları 2 tip html nesnesi üzerine basarsınız SVG veya Canvas. Her 2 durumda da PNG çıktısı almak için en iyi yöntem Canvas’tır.
Aşağıdaki fonksiyon ile herhangi canvas içerisindeki resmin çıktısını rahatlıkla indirebilirsiniz.
<!--HTML Code -->
<h1>KDS(Yakıt Tüketimi)</h1>
<a id="downloadExportPNG" onclick="downloadCanvas(this, 'displayChart', 'test.png');">PNG Çıktısı Indir</a>//JS Code
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
2nci fonksiyonumuzda SVG → Canvas dönüştürmek için kullanacağımız fonksiyon
function generateSVGToCanvas() {var svgString = new XMLSerializer().serializeToString(document.querySelector(‘svg’));var canvas = document.getElementById(“pngCanvas”);
var ctx = canvas.getContext(“2d”);
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], { type: “image/svg+xml;charset=utf-8” });
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL(“image/png”);
document.querySelector(‘#pngContainer’).innerHTML = ‘<img src=”’ + png + ‘“/>’;
DOMURL.revokeObjectURL(png);
};
img.src = url;
}

