Chart’ları PNG olarak Kaydetmek

Onur Dayıbaşı
Jul 25, 2017 · 1 min read
Export Chart

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;
}

Frontend Development With JS

Frontend Development With Javascript

Onur Dayıbaşı

Written by

Senior Frontend Developer at Thundra

Frontend Development With JS

Frontend Development With Javascript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade