該篇文章只寫(xiě)了將SVG報(bào)文字符串轉(zhuǎn)PNG布隔，后續(xù)再更新SVG圖片轉(zhuǎn)PNG，如有問(wèn)題點(diǎn)澎迎，請(qǐng)大家留言庐杨，謝謝选调！
一夹供、引jar包
需要引入的jar包包含如下：（這里的jar包版本，大家可以根據(jù)自己的maven私服上的版本做對(duì)應(yīng)關(guān)系仁堪，可以是其他版本號(hào)）
? <dependency>??????????
????????<groupId>org.apache.xmlgraphics</groupId>
????????<artifactId>batik-all</artifactId>
????????<version>1.7</version>
</dependency>
<dependency>
????????<groupId>xml-apis</groupId>
????????<artifactId>xml-apis-ext</artifactId>
????????<version>1.3.04</version>
????????</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
????????<artifactId>batik-codec</artifactId>
????????<version>1.7</version>
</dependency>
二哮洽、相關(guān)代碼
package com.mdp.backend.frame.impl.utils;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.PNGTranscoder;
/**
* 流程圖片操作
* @author lixiaolong
*
*/
public class ProcessPictureUtils {
/**
* 將svg字符串轉(zhuǎn)換為png
? ? *
? ? * @param svgCode svg代碼
? ? * @param pngFilePath 保存的路徑
? ? * @throws TranscoderException svg代碼異常
? ? * @throws IOException io錯(cuò)誤
? ? */
? ? public static String convertToPng(String svgCode, String pngFilePath){
? ? String errorMessage = "";
? ? ? ? File file = new File(pngFilePath);
? ? ? ? FileOutputStream outputStream = null;
? ? ? ? try {
? ? ? ? ? ? file.createNewFile();
? ? ? ? ? ? outputStream = new FileOutputStream(file);
? ? ? ? ? ? convertToPng(svgCode, outputStream);
? ? ? ? }catch(Exception e) {
? ? ? ? e.printStackTrace();
? ? ? ? errorMessage = "將svg字符串轉(zhuǎn)換為png出錯(cuò)！";
? ? ? ? Log4jUtils.info(String.format("將svg字符串轉(zhuǎn)換為png出錯(cuò)Ｏ夷簟： Excepion:=%s",e));
? ? ? ? }finally {
? ? ? ? ? ? if (outputStream != null) {
? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? outputStream.close();
? ? ? ? ? ? ? ? } catch (Exception e) {
? ? ? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return errorMessage;
? ? }
? ? /**
? ? * 將svgCode轉(zhuǎn)換成png文件鸟辅，直接輸出到流中
? ? *
? ? * @param svgCode svg代碼
? ? * @param outputStream 輸出流
? ? * @throws TranscoderException 異常
? ? * @throws IOException io異常
? ? */
? ? public static void convertToPng(String svgCode, OutputStream outputStream){
? ? try {
byte[] bytes = svgCode.getBytes("utf-8");
PNGTranscoder t = new PNGTranscoder();
TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(bytes));
TranscoderOutput output = new TranscoderOutput(outputStream);
t.transcode(input, output);
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
Log4jUtils.info(String.format("將svg轉(zhuǎn)換成png文件，直接輸出到流中出錯(cuò)］汉： Excepion:=%s",e));
}
? ? }
}
三匪凉、測(cè)試報(bào)文字符串樣例
"<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!-- created with bpmn-js / http://bpmn.io -->\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"288\" height=\"92\" viewBox=\"216 114 288 92\" version=\"1.1\"><defs><marker id=\"sequenceflow-end-white-black-369213csyyrintp0747bwivx0\" viewBox=\"0 0 20 20\" refX=\"11\" refY=\"10\" markerWidth=\"10\" markerHeight=\"10\" orient=\"auto\"><path d=\"M 1 5 L 11 10 L 1 15 Z\" style=\"fill: black; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; stroke: black;\"/></marker></defs><g class=\"djs-group\"><g class=\"djs-element djs-connection\" data-element-id=\"SequenceFlow_1tmmq3b\" style=\"display: block;\"><g class=\"djs-visual\"><path d=\"m 390,160L462,160 \" style=\"fill: none; stroke-width: 2px; stroke: black; stroke-linejoin: round; marker-end: url('#sequenceflow-end-white-black-369213csyyrintp0747bwivx0');\"/></g><polyline points=\"390,160 462,160 \" class=\"djs-hit\" style=\"fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;\"/><rect x=\"384\" y=\"154\" width=\"84\" height=\"12\" class=\"djs-outline\" style=\"fill: none;\"/></g></g><g class=\"djs-group\"><g class=\"djs-element djs-connection djs-dragging\" data-element-id=\"SequenceFlow_1ky1ex5\" style=\"display: block;\"><g class=\"djs-visual\"><path d=\"m 258,160L290,160 \" style=\"fill: none; stroke-width: 2px; stroke: black; stroke-linejoin: round; marker-end: url('#sequenceflow-end-white-black-369213csyyrintp0747bwivx0');\"/></g><polyline points=\"258,160 290,160 \" class=\"djs-hit\" style=\"fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;\"/><rect x=\"252\" y=\"154\" width=\"44\" height=\"12\" class=\"djs-outline\" style=\"fill: none;\"/></g></g><g class=\"djs-group\"><g class=\"djs-element djs-shape\" data-element-id=\"Task_0zg07r9\" style=\"display: block;\" transform=\"matrix(1 0 0 1 290 120)\"><g class=\"djs-visual\"><rect x=\"0\" y=\"0\" width=\"100\" height=\"80\" rx=\"10\" ry=\"10\" style=\"stroke: black; stroke-width: 2px; fill: white; fill-opacity: 0.95;\"/><text lineHeight=\"1.2\" class=\"djs-label\" style=\"font-family: Arial, sans-serif; font-size: 12px; font-weight: normal; fill: black;\"><tspan x=\"46.6640625\" y=\"43.599999999999994\">1</tspan></text></g><rect x=\"0\" y=\"0\" width=\"100\" height=\"80\" class=\"djs-hit\" style=\"fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;\"/><rect x=\"-6\" y=\"-6\" width=\"112\" height=\"92\" class=\"djs-outline\" style=\"fill: none;\"/></g></g><g class=\"djs-group\"><g class=\"djs-element djs-shape\" data-element-id=\"EndEvent_0v2lvki\" style=\"display: block;\" transform=\"matrix(1 0 0 1 462 142)\"><g class=\"djs-visual\"><circle cx=\"18\" cy=\"18\" r=\"18\" style=\"stroke: black; stroke-width: 4px; fill: white; fill-opacity: 0.95;\"/></g><rect x=\"0\" y=\"0\" width=\"36\" height=\"36\" class=\"djs-hit\" style=\"fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;\"/><rect x=\"-6\" y=\"-6\" width=\"48\" height=\"48\" class=\"djs-outline\" style=\"fill: none;\"/></g></g><g class=\"djs-group\"><g class=\"djs-element djs-shape djs-dragging\" data-element-id=\"StartEvent_01dnj5i\" style=\"display: block;\" transform=\"matrix(1 0 0 1 222 142)\"><g class=\"djs-visual\"><circle cx=\"18\" cy=\"18\" r=\"18\" style=\"stroke: black; stroke-width: 2px; fill: white; fill-opacity: 0.95;\"/></g><rect x=\"0\" y=\"0\" width=\"36\" height=\"36\" class=\"djs-hit\" style=\"fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;\"/><rect x=\"-6\" y=\"-6\" width=\"48\" height=\"48\" class=\"djs-outline\" style=\"fill: none;\"/></g></g><g class=\"djs-drag-group\" style=\"pointer-events: none;\" transform=\"matrix(1 0 0 1 20 0)\"><g class=\"djs-dragger\" data-element-id=\"StartEvent_01dnj5i\" style=\"display: block;\" transform=\"matrix(1 0 0 1 202 142)\" x=\"303\" y=\"409\"><g class=\"djs-visual\"><circle cx=\"18\" cy=\"18\" r=\"18\" style=\"stroke: black; stroke-width: 2px; fill: white; fill-opacity: 0.95;\"/></g><rect x=\"0\" y=\"0\" width=\"36\" height=\"36\" class=\"djs-hit\" style=\"fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;\"/><rect x=\"-6\" y=\"-6\" width=\"48\" height=\"48\" class=\"djs-outline\" style=\"fill: none;\"/></g></g></svg>"
四、效果圖
