最近使用者對我們的軟體提了一個新的需求，就是把web端做好的流程圖，儲存之後要能在Winform的客戶端應用程式可以看到。

記得上回我給大家分享了從資料庫載入xml資料顯示和將xml資料儲存到資料庫，那麼顯然，我們在將xml儲存到資料庫之前，還需要將xml資料做一個轉換，轉換成影象資料，然後base64編碼之後儲存到資料庫。

這就不得不涉及到mxgraph的一個用於dotnet的一個開發庫，可以在 https://github.com/jgraph/mxgraph 上下載到，下載之後找到dotnet資料夾，開啟裡面的解決方案，然後編譯，會生成一個dll。

這裡重點討論一下，web端和客戶端資料傳輸的問題，雖然我們用的是mysql資料庫，我們也可以獲取到流程圖的xml資料，但是我們如何將其轉化成影象資料呢？mxGraph已經封裝了一些操作，我們可以直接呼叫這些操作來生成影象資料

核心的類就是mxCellRenderer類，裡面有一個方法叫做CreateImage，引數比較多，一一講解：

CreateImage:

1. graph - 你構建的mxGraph物件
2. cells - 流程塊，一般為null，因為流程塊資訊都在graph物件裡面
3. scale - 縮放，通常為1，即不縮放
4. background - 生成圖片的背景顏色，最好給成控制元件的背景色
5. antiAlias - 抗鋸齒，當然要抗鋸齒了啊
6. clip - mxRectangle物件，一般給null

那麼現在很明確了，這個方法其實只需要一個引數，那就是graph。但是這個引數如何獲取？別急，還記得上回將載入xml資料時怎麼寫的程式碼嗎？

    var node = mxUtil.parseXml('你的xml資料');
    decoder = new mxCodec();
    decoder.decode(node.documentElement, graph.getModel)

其實用客戶端寫的時候與上面的程式碼一樣的邏輯，只不過用C#再重寫一編就是了

mxGraph graph = new mxGraph();
XmlDocument doc = mxUtils.ParseXml('你的xml資料');
mxCodec codec = new mxCodec();
codec.Decode(doc.DocumentElement, graph.Model);
Image img = mxCellRenderer.CreateImage(graph, null, 1, Color.Transparent, true, null);
 

當我們獲得了Image物件之後，轉換成base64編碼就不是問題，網上有很多文章講將影象base64編碼，因此此處就不再贅述。

至於客戶端怎麼去取，那當然就是大名鼎鼎的Select語句了！用Select從資料庫獲取到資料庫記錄，然後再將base64重新轉換成Image物件，然後放到pictureBox上就可以啦！