在按钮上保存客户端生成的图像单击

Question

我有一个IgniteUI igDataChart ，我想将其保存为磁盘作为图像。 您无法右键单击图表并保存图像，因为它使用了几个画布。 但是，该图表具有导出图像方法，该方法将获取整个图表图像并将其返回到javascript变量中。

我想在点击按钮时自动将此文件保存到用户的下载文件夹中。 如果这是服务器端图像，我可以简单地将用户引导到适当的URL，但事实并非如此。

用户如何通过单击按钮下载此客户端生成的图表的png图像？ 我需要一个crossbrowser解决方案。

的jsfiddle

$(function () {
    $("#exportBtn").click(function(){
       //returns an image DOM element;
       var pngImage = $("#chart").igDataChart("exportImage");
       //now i need to download the image
    });
});

Answer 1

此解决方案提供更好的浏览器支持 ，并可分配给按钮。 http://jsfiddle.net/koo2hv5t/7/

1. 检查blob支持（您可以为旧浏览器添加消息或服务器端回退）
2. 等到动画结束
3. 使用igDataChart将图表复制到dataURL格式
4. 使用https://github.com/ebidel/filer.js中的 Util.dataURLToBlob转换为blob

5. 使用来自https://github.com/eligrey/FileSaver.js的 saveAs将blob保存到文件中

    //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 

Answer 2

您可以通过以下方式继续：

1. 等到动画结束
2. 复制最后一个画布

3. 将数据分配给URL（而不是按钮）

    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 

http://jsfiddle.net/koo2hv5t/1/