echarts 图表转base64

该代码段定义了一个名为createBase64的函数,用于将含有Echarts图表的DOM元素转换为Base64字符串。它首先通过ID获取图表的canvas元素,然后获取其尺寸,并使用canvas的2D渲染上下文绘制图像,最后将canvas转换为DataURL(Base64编码)。在使用时,只需传入图表的DOMID,如#myEcharts1。
摘要由CSDN通过智能技术生成
/*
    创建 echartsBase64.js 文件
    echarts图转base64
    ele指图表DOM 容器ID   对应例子的ID("#myEcharts1")
    例如 <div id="myEcharts1" class="myEcharts1"></div>
 */
  export function createBase64(ele) {
      let docEle = ele + " canvas";
      let canvasFixed = document.querySelector(docEle),//获取图表元素
          canvasWidth = canvasFixed.width,//获取图表元素宽度
          canvasHeigth = canvasFixed.heigth,//获取图表元素高度
          canvas2D = canvasFixed.getContext('2d');
      canvas2D.drawImage(canvasFixed,canvasWidth,canvasHeigth);
      return canvasFixed.toDataURL()
  }

使用时

// 引入 echartsBase64 文件
createBase64("#myEcharts1")

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值