mxgraph之保存图片

1、写在前端：任何情况下，保存图片不可能只通过前台代码就能实现，因此，要保存前台绘制的graph图，我们需要用到mxgraph中的java包啦~
2、参考实例：
mxgraph\java\test\com\mxgraph\test\mxImageExportTest.java
这个例子就是将xml文档生成图片的。
3、改良的例子：

/**
 * 导出图片文件
 * @param w 图片宽
 * @param h 图片高
 * @param imageXML graph对应的xml代码
 */
	public void exportImage(int w, int h,String imageXML) {
                  String path = ".";
                  String processName="graphImage"
		File png = new File(path + processName + ".png");
		File dir = new File(path);
		if (!dir.exists()) {//若路径不存在则创建此路径
			dir.mkdir();
		}
		BufferedImage image = mxUtils.createBufferedImage(w, h, Color.WHITE);
		Graphics2D g2 = image.createGraphics();
		mxUtils.setAntiAlias(g2, true, true);
		mxGraphicsCanvas2D gc2 = new mxGraphicsCanvas2D(g2);
		gc2.setAutoAntiAlias(true);
		try {
			parseXmlSax(imageXML, gc2);
			ImageIO.write(image, "png", png);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
/**
	 * 创建并返回请求的图片
	 * 
	 * @param request
	 * @return
	 * @throws SAXException
	 * @throws ParserConfigurationException
	 * @throws IOException
	 */
	protected void parseXmlSax(String xml, mxICanvas2D canvas) {
		// Creates SAX handler for drawing to graphics handle
		mxSaxOutputHandler handler = new mxSaxOutputHandler(canvas);
		// Creates SAX parser for handler
		XMLReader reader;
		try {
			reader = SAXParserFactory.newInstance().newSAXParser()
					.getXMLReader();
			reader.setContentHandler(handler);
			// Renders XML data into image
			reader.parse(new InputSource(new StringReader(xml)));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

4.前台得到xml代码
注：这里的xml代码可不是mxgraph生成的那种可以直接读的代码呦！

var graph = designer.graph;//这里是你的js中所对应的graph
	    	var xmlDoc = mxUtils.createXmlDocument(); 
	    	var root = xmlDoc.createElement('output'); 
	    	xmlDoc.appendChild(root); 
	    	 
	    	var xmlCanvas = new mxXmlCanvas2D(root); 
	    	var imgExport = new mxImageExport(); 
	    	imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas); 
	    	 
	    	var bounds = graph.getGraphBounds(); 
	    	var w = Math.round(bounds.x + bounds.width + 4); 
	    	var h = Math.round(bounds.y + bounds.height + 4); 
	    	var xml = mxUtils.getXml(root);
                  xml = encodeURIComponent(xml);//这就是要提交到后台的xml代码

5.这样可以说就大功告成了，但是所导出的图片有两个bug:中文乱码和图片节点无法被绘制。解决大法：用附件中被我改良了的mxgraph包代替所有mxgraph的jar包即可。
6.要想知道我源码中都改了些什么，且听下回歪歪。
***********************格叽格叽***************************************
lysh，心是透明的，因为雨慢慢的停了……

评论

6 楼 SYSGIS 2016-10-21  

嗯，写的不错，每篇文章的后记写的也不错，哈哈

5 楼 goodone 2016-06-01  

我想问问，怎么把mxgraph生成xml格式的流程生成图片文件啊！需要怎么做？

4 楼 ncxujinjun 2016-03-29  

楼主的内容很有帮助

3 楼 haoyingshaung 2014-09-27  

qq:373660351
请教mxgraph 保存图片问题

2 楼 haoyingshaung 2014-07-04  

请教 生成图片  QQ 373660351

1 楼 usernames 2013-12-05