将前端svg图片存为字符串，供world模板使用

转载请注明：https://blog.csdn.net/qfashly/article/details/79498524

最近由于业务需要，需要将前端查询的数据在浏览器上以图片的形式展示，然后回传到后台供导出world使用；如果将图片存为文件形式，则性能和效率太差，所以使用highcharts.js将数据渲染成图片，再使用js将svg图片传回，使用Base64将svg转换成String，供导出world文件使用。

//向后台提交svg数据
var chartDivArr = $("div.img");
for ( var i = 0; i < chartDivArr.length; i++) {
var chartDiv = $(chartDivArr[i]);
var chart_img = chartDiv.highcharts();
var svg_img = chart_img.getSVG();
var img_id = chartDiv.attr("id");
var svg = $('<input type="text" style="display: none;"/>');
svg.attr("id", img_id);
svg.attr("name", img_id);
svg.attr("value", svg_img);
myform.append(svg);
}

//处理前台传回的图片
Map<String, String> charts = new HashMap<>();
String svgCode = "";
String pngBase64 = "";
Map<String, String[]> parameterMap = request.getParameterMap();
for (Map.Entry<String, String[]> parameter : parameterMap.entrySet()) {
if (parameter.getKey().startsWith("img")) {
svgCode = parameter.getValue()[0];
pngBase64 = SvgPngConverter.convertToPngBytesBase64(svgCode);
charts.put(parameter.getKey(), pngBase64);
}
}

/**
* 把svg图片编码转换为png格式图片的base64编码
* @param svgCode
* @return
*/
public static String convertToPngBytesBase64(String svgCode) {
try {
byte[] bytes = svgCode.getBytes("UTF-8");
PNGTranscoder t = new PNGTranscoder();
t.addTranscodingHint(PNGTranscoder.KEY_DEFAULT_FONT_FAMILY, "宋体");
t.addTranscodingHint(PNGTranscoder.KEY_LANGUAGE, "zh_cn");
t.addTranscodingHint(PNGTranscoder.KEY_WIDTH, new Float(1000.0));//只要指定宽度即可，高度自动调整。
ByteArrayInputStream bais = new ByteArrayInputStream(bytes);
TranscoderInput input = new TranscoderInput(bais);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
TranscoderOutput output = new TranscoderOutput(baos);
t.transcode(input, output);
baos.flush();
byte[] pngBytes = baos.toByteArray();
byte[] pngBase64Bytes = Base64.encodeBase64Chunked(pngBytes);
IOUtils.closeQuietly(bais);
IOUtils.closeQuietly(baos);
return new String(pngBase64Bytes).trim();
} catch (Exception e) {
logger.warn("cover svg to pngbase64 fail", e);
return null;
}
}