echarts获取图表的base64编码格式数据

最新推荐文章于 2024-08-27 10:37:34 发布

bigbear776

最新推荐文章于 2024-08-27 10:37:34 发布

阅读量1.3k

点赞数

原文链接：https://blog.csdn.net/hanfei0000cool/article/details/50865071

版权

关键词由CSDN通过智能技术生成

function 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();
}

因为echars生成的图表是由多个canvas标签组成的，不能简单的通过toDataURL()方法获取，而echars的API中getDataURL()方法，必须通过echarts对象获取.当页面已经加载完成后，想随时获取该图片并上传到服务器保存，getDataURL()就不太使用了。
因此只好自己动手将页面的多个canvas标签重新绘制到一个canvas中，这样就完美解决了。

效果：