canvas图片下载（svg,png）

冉然

于 2024-03-22 10:41:05 发布

阅读量116

点赞数 3

分类专栏： typeScript 文章标签： typescript

本文链接：https://blog.csdn.net/yangyanli0309/article/details/136933856

版权

typeScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

// 图片导出
const downPng = (typeTag: string) => {
  let myCanvas = document.getElementById('myChart3')!
  myChart3.value = echarts.init(myCanvas)
  // this.chartObject存的是echarts实例
  if (myChart3.value) {
    // echarts官网文档实例方法getDataURL
    let picInfo = myChart3.value.getDataURL({
      type: 'png',
      pixelRatio: 1.5,  // 放大两倍下载。解决生成图片在移动端模糊问题
      backgroundColor: '#fff',
      excludeComponents: ['toolbox'] // 导出时忽略toolbox组件
    });// 获取到的是一串base64信息

    if (typeTag == 'PNG') {
      const elink = document.createElement('a');
      elink.download = store.state.graph.graphInfo.graphName;
      elink.style.display = 'none';
      elink.href = picInfo;
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink)
    } else if (typeTag == 'SVG') {
      //设置svg标签属性
      let svg0 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg0.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      svg0.setAttribute('version', '1.1');
      svg0.setAttribute('height', '880');
      svg0.setAttribute('width', '1920');
      let img3 = document.createElementNS('http://www.w3.org/2000/svg', 'image');
      // base64编码写入href
      img3.href.baseVal = picInfo;
      img3.setAttribute('height', '880');
      svg0.appendChild(img3);
      let h = svg0.outerHTML;
      //给图片对象写入base64编码的svg流
      let data = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(h)));
      const elink = document.createElement('a');
      // 设置默认文件名，this.chartTitle为绘图时生成的标题
      elink.download = store.state.graph.graphInfo.graphName;
      elink.style.display = 'none';
      elink.href = data;
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    }
  } else {
    message.warning('暂未绘制图表，请先绘制图表');
  }
}