javascript - 使用javascript输出图像但不下载

标签 javascript mysql database image export

我使用 Highcharts 库来生成一些图形。

我想将它们发送到服务器并执行 mysql 请求以将数据信息保存到我的数据库中。问题是它只是将文件下载到我的电脑中。

我真的很想将它保存在服务器上预定义的文件夹中。它只是下载它。

这段代码是我费尽心思写的。

我遇到了很多问题,但我不知道如何通过最后一个。

下面是生成图片并自动下载的代码:

      <script type="text/javascript">//<![CDATA[ 
$(function(){
/**
 * Create a global getSVG method that takes an array of charts as an argument
 */
Highcharts.getSVG = function(charts) {
    var svgArr = [],
        top = 0,
        width = 0;

    $.each(charts, function(i, chart) {
        var svg = chart.getSVG();
        svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
        svg = svg.replace('</svg>', '</g>');

        top += chart.chartHeight;
        width = Math.max(width, chart.chartWidth);


        svgArr.push(svg);
    });

    return '<svg height="2400px" width="1200px" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

/**
 * Create a global exportCharts method that takes an array of charts as an argument,
 * and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {
    var form
        svg = Highcharts.getSVG(charts);

    // merge the options
    options = Highcharts.merge(Highcharts.getOptions().exporting, options);

    // create the form
    form = Highcharts.createElement('form', {
        method: 'post',
        action: options.url
    }, {
        display: 'none'
    }, document.body);

    // add the values
    Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
        Highcharts.createElement('input', {
            type: 'hidden',
            name: name,
            value: {
                filename: options.filename || 'chart',
                type: options.type,
                width: 1200,

                svg: svg
            }[name]
        }, null, form);
    });
    //console.log(svg); return;
    // submit
    form.submit();

    // clean up
    form.parentNode.removeChild(form);
};


$('#export').click(function() {
    Highcharts.exportCharts([chart1, chart2, chart3]);
});
});//]]>  

</script>
    </head>
    <body>

<script src="js/highcharts.js"></script>
<script type="text/javascript" src="http://highcharts.com/js/testing-exporting.js"></script>
<div id="container" style="height: 400px; width:1200px"></div>
<div id="container2" style="height: 400px; width:1200px"></div>
<div id="container3" style="height: 400px; width:1200px"></div>

<button id="export">Export all</button>

我只是尝试将它发送到服务器。

提前感谢大家的帮助。

接受我最崇高的敬意。

亲切的问候SP。

最佳答案

你可以试试这个

 var chart = $('#yourchart').highcharts();
    svg = chart.getSVG();   
    var base_image = new Image();
    svg = "data:image/svg+xml,"+svg;
    base_image.src = svg;
    $('#mock').attr('src', svg);


var dataString = $('#mock').html() ; //  or just binary code 
$.ajax({
    type: 'POST',
    data: dataString,
    url: 'your-server/',
    success: function(data){

    }
});

Save highchart as binary image

关于javascript - 使用javascript输出图像但不下载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12424731/

相关文章:

php - MySQL NULL 或用户输入

javascript - Sequelize,使用 React 删除多行

Javascript继承问题

mysql - 如何修复插入许多重复行的 INSERT INTO ... SELECT 代码?

javascript - 将 onclick 事件转换为 addEventListener

mysql - excel(单元格)中引用的按日期进行 SQL 查询

mysql:源错误 2?

java - 通过java程序远程连接mySQL

javascript - JS打印函数,为什么返回false?

javascript - 为什么传奇效应没有被调用?