MxGraph导出流程图为图片文件

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/Add.Master" AutoEventWireup="true" CodeBehind="AlgGroupShow.aspx.cs" Inherits="AutoMonitorWeb.Modules.Config.Algorithm.AlgGroup.AlgGroupShow" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHead" runat="server">
    <script type="text/javascript">
        mxBasePath = '<%=AutoMonitorWeb.BasePage.BasePage.Url%>Js/MxGraph/src/';
    </script>
    <%=AutoMonitorWeb.Config.StaticFileVersionConfig.GetFileUrl("Js", "MxGraph")%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceMain" runat="server">
    <asp:Repeater ID="repModel" runat="server">
        <ItemTemplate>
            <table width="100%" cellpadding="0" cellspacing="0" class="tableEdit">
                <tr>
                    <td align="right" width="10%" class="tableField">算法名称：</td>
                    <td width="90%"><%#Eval("algName")%></td>
                </tr>
                <tr>
                    <td align="right"  class="tableField">子算法：</td>
                    <td><%#Eval("是否为子算法")%></td>
                </tr>
                <tr>
                    <td align="right"  class="tableField">备注：</td>
                    <td><%#Eval("remark")%></td>
                </tr>
                <tr>
                    <td align="right"  class="tableField">状态：</td>
                    <td><%#Eval("state")%></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div style="width:100%;height:20px;line-height:20px;font-weight:bolder;color:#f00;text-align:center;">算法图如下<a href="javascript:void(0);" onclick="<%#this.JSVarName%>.SaveAsImage();return false;">（另存为图片）</a></div>
                        <div id="divCon" style="width:100%;position:absolute;"></div>
                        <script type="text/javascript">
                            $(function () {
                                <%#this.JSVarName%>.LoadXml('<%#Eval("xmlContext")%>');
                            });
                        </script>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:Repeater>
    <script type="text/javascript">
        var <%=this.JSVarName%> = {
            graph:null,
            model:null,
            Init:function () {
	            this.model = new mxGraphModel();
	            this.graph = new mxGraph($("#divCon")[0], this.model);             
	            this.graph.setConnectable(true);
	            this.graph.setMultigraph(false);
	            this.graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';

	            var keyHandler = new mxKeyHandler(this.graph);
	            var rubberband = new mxRubberband(this.graph);
                this.graph.setCellsEditable(false);             
                this.graph.setEnabled(false);      

				// Creates the default style for vertices
				var style = [];
				style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
				style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
				style[mxConstants.STYLE_STROKECOLOR] = '#99bdc4';
				style[mxConstants.STYLE_ROUNDED] = true;
				style[mxConstants.STYLE_FILLCOLOR] = '#c3f1e9';
				style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
				style[mxConstants.STYLE_FONTCOLOR] = '#056685';
				style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
				style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
				style[mxConstants.STYLE_FONTSIZE] = '13';
				style[mxConstants.STYLE_FONTSTYLE] = 1;
				this.graph.getStylesheet().putDefaultVertexStyle(style);
		
				// Creates the default style for edges
				style = [];
				style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
				style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
				style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
				style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
				style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
				style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
				style[mxConstants.STYLE_FONTSIZE] = '12';
				this.graph.getStylesheet().putDefaultEdgeStyle(style);
            },
	        LoadXml: function (xmlfile) { 
                if(xmlfile!=""){
                    xmlfile = "<?xml version='1.0' encoding='utf-8'?><mxGraphModel>"+xmlfile+"</mxGraphModel>";
                   var doc = mxUtils.parseXml(xmlfile);
                   var dec = new mxCodec(doc);
                   dec.decode(doc.documentElement, this.graph.getModel());
                }
            },
            SaveAsImage:function () {
                  var bounds = this.graph.getGraphBounds();
                  var w = Math.round(bounds.x + bounds.width + 4);
                  var h = Math.round(bounds.y + bounds.height + 4);
                  var xml = mxUtils.getXml(mxUtils.getViewXml(this.graph, 1), '\n');
                  new mxXmlRequest('<%=AutoMonitorWeb.BasePage.BasePage.Url%>Modules/Config/Algorithm/AlgGroup/SaveAsImage.ashx', 'filename=graph.jpg&format=jpeg&w=' + w +'&h=' + h + '&xml=' + encodeURIComponent(xml)).simulate(document, '_blank');
            }
        }
    </script>
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using com.mxgraph;
using System.Xml;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

namespace AutoMonitorWeb.Modules.Config.Algorithm.AlgGroup
{
    /// <summary>
    /// 将xmGraph的xml字符串生成图形
    /// </summary>
    public class SaveAsImage : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string xml = HttpUtility.UrlDecode(context.Request.Params["xml"]??"");
            int width =CommonClass.StringHander.Common.GetInt(context.Request.Params["w"]??"");
            int height = CommonClass.StringHander.Common.GetInt(context.Request.Params["h"] ?? "");
            string filename = context.Request.Params["filename"];
            string format = context.Request.Params["format"];

            context.Response.ContentType =string.Format("image/{0}",format);
            xml = string.Format(@"<graph label=""xclMxGraph"" x=""0"" y=""0"" width=""{1}"" height=""{2}"" scale=""1"">{0}</graph>", xml,width,height);
            XmlTextReader xmlReader = new XmlTextReader(new StringReader(xml));
            mxGraphViewImageReader viewReader = new mxGraphViewImageReader(xmlReader, Color.White, 4, true, true);
            Image image = mxGraphViewImageReader.Convert(viewReader);
            context.Response.AddHeader("Content-Disposition",string.Format("attachment; filename={0}",filename));
            MemoryStream memStream = new MemoryStream();
            image.Save(memStream, ImageFormat.Jpeg);
            memStream.WriteTo(context.Response.OutputStream);
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }
}