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

你可能感兴趣的:(bizCharts图表canvas保存为图片)