bizCharts图表canvas保存为图片

1.bizCharts自带函数

  handleClick = () => {
        const chartIns = this.state.chartIns;
        chartIns.downloadImage();
    }

2.获取canvas dom元素,模拟a元素点击

  handleClick = () => {
        const chartIns = this.state.chartIns;
        var image = chartIns.get('canvas')._cfg.el.toDataURL("image/jpeg");
        var $a = document.createElement('a');
        $a.setAttribute("href", image);
        $a.setAttribute("download", "");
        $a.click();
    }

3.重绘canvas,设置背景为白色

    handleClick = () => {
        const chartIns = this.state.chartIns;
        const canvas = document.createElement('canvas');
        canvas.height = 350;
        canvas.width = 1000;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(chartIns.get('canvas')._cfg.el, 0, 0);
        var image = canvas.toDataURL("image/jpeg");
        var $a = document.createElement('a');
        $a.setAttribute("href", image);
        $a.setAttribute("download", this.props.title);
        $a.click();
    }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,907评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,502评论 2 59
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,181评论 1 45
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,853评论 0 17
  • 2018年7月17日 星期二 晴 今天跟女儿通电话,女儿跟我汇报在大姨家的生活:早上7点起床,背...
    周李扬阅读 1,279评论 0 0

友情链接更多精彩内容