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

Save Client Side Generated Image on Button Click

本文关键字：按钮单击图像客户端保存更新时间：2023-09-26

我有一个IgniteUI igDataChart，我想保存到磁盘作为图像。您不能右键单击图表并保存图像，因为它使用了几个画布。然而，图表确实有一个export image方法，该方法将获取整个图表图像并将其返回到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
    });
});

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

检查blob支持(您可以为旧浏览器或服务器端后退添加消息)
等待动画结束
用igDataChart
用Util.dataURLToBlob从https://github.com/ebidel/filer.js转换成blob

保存blob到一个文件与saveAs从https://github.com/eligrey/FileSaver.js

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

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

等待动画结束
复制最后一个

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