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

Question

我有一个 IgniteUI igDataChart that I would like to save to disk as an image. You cannot right click on the chart and save the image, because it uses several canvases. The chart does however have an export image 方法可以获取整个图表图像并将其 return 放入 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

您可以按照以下方式进行：

等动画结束
复制最后一个canvas中的全部

将数据分配给 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/

Answer 2

此解决方案提供更好的 browser support and can be assigned to a button. http://jsfiddle.net/koo2hv5t/7/

检查 blob 支持（您可以为旧浏览器添加消息或服务器端回退）
等动画结束
使用 igDataChart
使用 Util.dataURLToBlob 从 https://github.com/ebidel/filer.js

使用 saveAs 从 https://github.com/eligrey/FileSaver.js

将 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

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

Save Client Side Generated Image on Button Click

javascript

jquery

infragistics

ignite-ui