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

Question

我有一个IgniteUI igDataChart，我想把它作为映像保存到磁盘中。您不能右键单击图表并保存图像，因为它使用多个画布。然而，图表有一个输出图像方法，它将获取整个图表图像并将其返回到javascript变量中。

我想把这个文件自动保存到用户的下载文件夹点击按钮。如果这是一个服务器端映像，我可以简单地将用户引导到适当的url，但它不是。

用户如何下载此客户端生成的png图像的图表点击按钮？我需要一个跨浏览器的解决方案。

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. 用dataURL将图表复制到igDataChart格式
4. 从Util.dataURLToBlob从https://github.com/ebidel/filer.js转换为blob
5. 将blob保存到带有saveAs的https://github.com/eligrey/FileSaver.js文件中 //检查支持尝试{ var isFileSaverSupported =！{setTimeout(函数){//将数据添加到url函数downloadCanvas(链接，canv，文件名){ if (isFileSaverSupported) { saveAs(Util.dataURLToBlob(canv.src)，filename)；}$(“#exportBtn”).click(函数() {downloadCanvas(此，$(“#图表”).igDataChart(“exportImage”，800,600)，'test.png')；}；}，1000)；//等待动画结束

Answer 2

您可以按以下方式进行：

1. 等到动画结束
2. 复制最后一张中的所有画布
3. 将数据分配给url (而不是按钮) setTimeout(函数() { var c=$(“#图表画布”)；//get句柄到所有画布var ctx = cc.length - 1.getContext('2d')；for (i = 0；i< c.length - 1；i++) {//将所有画布添加到最后一个ctx.drawImage(ci，0，0)；} for (i = 0；i< c.length - 1；i++) {//删除重复项ci.remove()；}//将数据添加到url函数downloadCanvas(链接、canv、文件名){ link.href = canv.toDataURL ()；link.download = filename；}$(“#DL1”).click(函数(){ downloadCanvas(this，c2，'test.png')；}，1000)；//等待动画结束

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