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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qfashly/article/details/79498524

转载请注明：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;
    }
}