首页 > 解决方案 > HighCharts Base64 无法解码以转换为 .png 或 .jpg 图像

问题描述

我正在使用下面的代码来生成 HighCharts 图形并从生成的 SVG 图像中获取 base64 代码。然后,我使用 php 之类的引擎和 base64_decode 函数来解码 Base64 并从中生成 .png 或 .jpg 图像。

我遇到的问题是 php 抱怨 Base64 代码无效。当我尝试使用 Base64 代码处理任何其他随机图像时,php 接受它并立即创建 .png 或 .jpg 。

我认为这不是 php 代码,而是与我从 HighCharts 获得的 Base64 代码有关。我已经尝试使用其他工具而不是像 ColdFusion 这样的 php 进行相同的练习,结果是一样的。HighCharts 生成的那些从未工作过,但其他人却成功了。

如果有人有想法,我将不胜感激。您可以运行下面的代码片段来检查生成的 Base64。谢谢。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="container"></div> 

<button id="add-image">Show base64 string for above chart</button>

<script type="text/javascript">
var chart = Highcharts.chart('container', {
  series: [{
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});
$("#add-image").click(function() {
  var svg = $("#container").find('svg')[0],
    svgData = new XMLSerializer().serializeToString(svg),
    base64ImageValue = btoa(unescape(encodeURIComponent(svgData)));
    document.getElementById('base64Container').innerHTML = base64ImageValue;
});
</script>  <br><br>

<textarea id="base64Container" style="width:90%" rows="10"></textarea>

标签: highchartsbase64

解决方案


推荐阅读