Question

目前我有一些代码使用Flot.js库+一些数据来使用HTML canvas在客户端生成图形。然后，生成的画布将编码为BASE64格式，并通过HTTP从客户端发送到服务器。在服务器端，请求被解码，BASE64被提取并保存为PNG图像。该图像稍后用于PDF报告。

以下是Flot.JS的一个工作示例，了解它如何生成Canvas。在我的代码中，我稍后使用如下代码将画布转换为图像的BASE64编码：

var canvas = plot.getCanvas();
return canvas.toDataURL("image/png");

问题

以上对我来说很好，但它有一个副作用，它适用于客户端，客户端可以看到临时步骤，即图形生成和画布以及通过HTTP发送canvas编码时的等待时间。我真的只需要“生成并保存在服务器端的图形图像”。

问题

如何让整个过程在服务器端运行？

流程是：

在画布上生成flot图表
将画布保存为服务器端的PNG图像

我在服务器端运行任何JS都是全新的，所以我正在寻找答案，看看我想要的是什么，以及如何，以及是否可以使用诸如Flot.JS等库来完成它插件。

$(function() {

	  var oilPrices = [
	    [1167692400000, 61.05],
	    [1167778800000, 58.32],
	    [1167865200000, 57.35],
	    [1220824800000, 106.34]
	  ];

	  var exchangeRates = [
	    [1167606000000, 0.7580],
	    [1167692400000, 0.7580],
	    [1220824800000, 0.7010],
	    [1220911200000, 0.70050]
	  ];

	  var data = [{
	    data: oilPrices,
	    label: "Oil price ($)"
	  }, {
	    data: exchangeRates,
	    label: "USD/EUR exchange rate",
	    yaxis: 2
	  }];

	  var options = {
	    canvas: true,
	    xaxes: [{
	      mode: "time"
	    }],
	    yaxes: [{
	      min: 0
	    }, {
	      position: "right",
	      alignTicksWithAxis: 1,
	      tickFormatter: function(value, axis) {
	        return value.toFixed(axis.tickDecimals) + "€";
	      }
	    }],
	    legend: {
	      position: "sw"
	    }
	  }

	  $.plot("#placeholder", data, options);

	  $("input").change(function() {
	    options.canvas = $(this).is(":checked");
	    $.plot("#placeholder", data, options);
	  });

	  // Add the Flot version string to the footer

	  $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
	});

<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.canvas.js"></script>

<div id="header">
  <h2>Canvas text</h2>
</div>

<div id="content">

  <div class="demo-container">
    <div id="placeholder" class="demo-placeholder" style="width:600px;height:200px"></div>
  </div>

  <p>
    <input type="checkbox" checked="checked">Enable canvas text</input>
  </p>
</div>

如何使用Flot.JS Library +我的数据在服务器端生成图像（即PNG）？

0 个答案: