如何将highcharts生成的图片转化base64发送后端

  1. 下载 canvg.js 我的百度网盘js工具有如有需要请咨询
  2. 导入文件
   <script src="../zui/lib/jquery/jquery.js"></script>
 <script src="Highcharts-6.1.0/code/highstock.js"></script>
        <script src="Highcharts-6.1.0/code/modules/exporting.js"></script>
        <script src="Highcharts-6.1.0/code/modules/export-data.js"></script>
<script src="../zui/js/canvg.js"></script>
  1. 在html中加入一个canvas画布div
<canvas id='canvasId' style='display: none'></canvas>
  1. 在js中加入以下代码

var charData = $('#container_1').highcharts().getSVG();
                        canvg(canvasId, charData);
                         canvg(canvasId, charData);
                        function convertCanvas(canvas) {
                            var image = new Image();
                            image.src = canvas.toDataURL("image/png");
                            console.log(image)
                            return image
                        }
                        var imageData = convertCanvas(canvasId).src   // 生成了base64编码
                        console.log(imageData)
                    imgAjax(imageData)   // 发送ajax
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,878评论 1 45
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...
    fastwe阅读 1,041评论 0 1
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,883评论 2 32
  • 1.女人与秋裤 初秋时节,又到了女人与秋裤对峙的时候。到底要不要穿秋裤,什么样的人,什么时候会穿秋裤。隐隐的...
    夏末夏墨阅读 898评论 0 2
  • 美团walle打包教程 我们在android开发的时候经常会遇到多渠道打包,传统是使用productFlavors...
    繁体字遇上简体字阅读 6,010评论 1 4

友情链接更多精彩内容