HighCharts生成的Base64无法解码转换为PNG/JPG格式图片问题求助

问题根因 #

你当前生成的Base64是SVG矢量文本的编码，不是PNG/JPG这类栅格图片的二进制流编码，且自行序列化的Highcharts SVG缺少必要的XML命名空间声明，两种原因共同导致后端无法直接解码生成图片。

修复方案 #

方案1：前端直接导出标准栅格图片Base64（推荐） #

前端先把SVG转成PNG/JPG格式再输出Base64，后端直接解码即可生成图片，修改你的点击事件逻辑如下：

$("#add-image").click(function() {
  // 调用官方API获取合规SVG，避免自行序列化DOM遗漏属性
  var svgData = chart.getSVG();
  var svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
  var DOMURL = window.URL || window.webkitURL || window;
  var url = DOMURL.createObjectURL(svgBlob);
  
  // 将SVG转成canvas再导出PNG格式的Base64
  var img = new Image();
  img.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
    // 移除Base64头之后的内容就是PHP可以直接解码的标准PNG编码
    var pngBase64 = canvas.toDataURL('image/png').replace(/^data:image\/png;base64,/, '');
    document.getElementById('base64Container').innerHTML = pngBase64;
  };
  img.src = url;
});

方案2：传递规范SVG内容，后端转栅格图片 #

如果需要后端处理转格式，优先用Highcharts官方API获取合规SVG，不要自行序列化DOM：

1. 前端修改SVG获取逻辑

$("#add-image").click(function() {
  // 调用官方API直接生成合规SVG字符串，自带所有必要属性
  var svgData = chart.getSVG();
  var base64ImageValue = btoa(unescape(encodeURIComponent(svgData)));
  document.getElementById('base64Container').innerHTML = base64ImageValue;
});

2. 后端不能直接将解码后的内容存为PNG/JPG，需要先转码，PHP端可用Imagick扩展处理：

<?php
$base64 = $_POST['chart_base64'];
// 解码得到SVG文本
$svgContent = base64_decode($base64);
// 用Imagick将SVG转成PNG
$im = new Imagick();
$im->readImageBlob($svgContent);
$im->setImageFormat("png");
// 保存PNG文件
file_put_contents('./chart.png', $im);
$im->destroy();
?>

注意事项 #

• 自行序列化Highcharts的DOM SVG会遗漏xmlns="http://www.w3.org/2000/svg"等核心声明，导致所有SVG解析工具无法识别
• 你之前测试的其他图片Base64是已经完成栅格编码的内容，和SVG文本编码本质不是同一种数据，无法复用相同的处理逻辑

内容的提问来源于stack exchange，提问作者user2990556