nollyhi

结合作者的组件，我做了一个简单的保存图片和图片预览的例子，希望可以探讨交流。 http://n.duyaqi.com/MindMap/

> > 结合作者的组件，我做了一个简单的保存图片和图片预览的例子，希望可以探讨交流。 > > http://n.duyaqi.com/MindMap/ > > 看起来还是存在一些问题，你可以谈谈你是怎么实现的 > >>我之前是直接保存svg，发现有黑色块，明显是在保存图片时样式没有加载。 >>我没搞过d3，所以是直接操作dom来实现的。 >>我的初略思路如下： >>1. 分别触发gps和fitView按钮点击事件，让mindmap内容在svg元素中完全显示，且在中间位置。 >>2. 拿到当前mindmap在svg中的横纵坐标，宽高，及当前缩放倍数值。 >>3. 克隆svg，将克隆mindmap放大自定义倍数（我定义的是3倍）。 >>4. 同时创建相对于svg 中 mindmap 放大（3倍）的canvas。 >>5. 根据放大比例（克隆svg与原svg的缩放比例），算出克隆对象mindmap在克隆svg中的坐标位置， >>6. 将克隆svg装成base64, 放入image对象，然后在canvas中画出来或者下载成png。 >>以上漏了一个重要环节，在下载前，还要把样式绑定到g元素上。

> 在你的网页点击show canvas后，会发现原本写有‘HTML & CSS’的节点变成了‘HTML &’，缺失了一部分内容 我这边没有看到缺失， 你把图片另存下来看还是缺失吗？ 

> > > 看起来是样式不一致，我的是Chrome浏览器，图片下载也是一样缺失 嗯，好像是的，我也是Chrome，我用其他同事的浏览器看过了，也都没问题，手机上也没有问题。你那边的情况有点无法解释了。。。

1. 我有个小建议，看作者能不能后面更新上，就是根节点下的二级节点，可以支持左右分布就完美了。 2. 还有一个Bug，目前，如果创建过多的二级节点，靠近底部的二级节点点击加号按钮无法正常创建当前二级节点三级节点，有时候还会出现把三级节点添加在其它节点下（这个目前还没有找到出错规律）。

> * 刚才看了一下，由于过多的二级节点而产生的Bug，是因为当初数据的唯一id设置的不严谨。 > * 左右分布可能要等以后有时间再做了 > * 图片下载这一块，也许你可以开个repository，我可以去提bug 欢迎指点：https://github.com/nollyhi/mindmap-save-as-png

> @nollyhi 【导出为图片】功能的源码可以开源吗 欢迎指点：https://github.com/nollyhi/mindmap-save-as-png