我有一个IgniteUI igDataChart我希望将其保存为磁盘作为图像。您无法右键单击图表并保存图像,因为它使用了几个画布。但是,该图表有一个export image方法,它将获取整个图表图像并将其返回到javascript变量。
我想在点击按钮时自动将此文件保存到用户的下载文件夹中。如果这是服务器端图像,我可以简单地将用户引导到相应的URL,但事实并非如此。
用户如何通过单击按钮下载此客户端生成的图表的png图像?我需要一个crossbrowser解决方案。
$(function () {
$("#exportBtn").click(function(){
//returns an image DOM element;
var pngImage = $("#chart").igDataChart("exportImage");
//now i need to download the image
});
});
答案 0 :(得分:2)
此解决方案提供了更好的browser support,可以分配给按钮。 http://jsfiddle.net/koo2hv5t/7/
igDataChart
Util.dataURLToBlob
的blob
将blob保存到https://github.com/eligrey/FileSaver.js
saveAs
的文件中
//check support
try {
var isFileSaverSupported = !! new Blob;
} catch (e) {}
setTimeout(function () {
//add data to url
function downloadCanvas(link, canv, filename) {
if (isFileSaverSupported) {
saveAs(Util.dataURLToBlob(canv.src), filename);
}
}
$("#exportBtn").click(function () {
downloadCanvas(this, $("#chart").igDataChart("exportImage", 800, 600), 'test.png');
});
}, 1000); //wait till animation end
答案 1 :(得分:1)
您可以按以下方式继续:
将数据分配到网址(而不是按钮)
setTimeout(function () {
var c = $("#chart canvas"); //get handle to all canvas
var ctx = c[c.length - 1].getContext('2d');
for (i = 0; i < c.length - 1; i++) { //add all canvas to the last one
ctx.drawImage(c[i], 0, 0);
}
for (i = 0; i < c.length - 1; i++) { //remove the duplicates
c[i].remove();
}
//add data to url
function downloadCanvas(link, canv, filename) {
link.href = canv.toDataURL();
link.download = filename;
}
$("#dl1").click(function () {
downloadCanvas(this, c[2], 'test.png');
});
}, 1000); //wait till animation end