获取echarts的base64图片

最新推荐文章于 2024-04-09 14:43:22 发布

转载最新推荐文章于 2024-04-09 14:43:22 发布 · 3.3k 阅读

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种方法，用于获取已渲染的ECharts图表的Base64位URL，通过将多个画布元素合并到一个画布中，实现整个图表的完整截图。

           /**
             * 获取渲染后的echarts
             */
            getFullCanvasDataURL(divId){
                //将第一个画布作为基准。
                var baseCanvas = $("#"+divId).find("canvas").first()[0];
                if(!baseCanvas){
                    return false;
                };
                var width = baseCanvas.width;
                var height = baseCanvas.height;
                var ctx = baseCanvas.getContext("2d");
                //遍历，将后续的画布添加到在第一个上
                $("#"+divId).find("canvas").each(function(i,canvasObj){
                    if(i>0){
                        var canvasTmp = $(canvasObj)[0];
                        ctx.drawImage(canvasTmp,0,0,width,height);
                    }
                });
                //获取base64位的url
                return baseCanvas.toDataURL();
            },