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

我有一个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
    });
});

解决方法:

该解决方案提供了更好的browser support,并且可以分配给按钮. http://jsfiddle.net/koo2hv5t/7/

>检查Blob支持(您可以添加有关旧浏览器或服务器端后备消息的消息)
>等到动画结束
>使用igDataChart将图表复制为dataURL格式
>从https://github.com/ebidel/filer.js使用Util.dataURLToBlob转换为blob
>从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

标签：infragistics,ignite-ui,javascript,jquery
来源： https://codeday.me/bug/20191120/2042262.html