Comments (7)
你好,@onlyoneice ,非常感谢你的支持。
其实这是个已知的问题,但是我还没有很好的解决方案。不如我先来介绍一下jsmind 以及其保存图片的原理,看看你(或者其他有兴趣的朋友)有没有什么好的思路:
jsMind 在内部构造了一个节点树,树上的根节点就是脑图的主题,子节点就是不同的分支。
显示脑图时,jsMind 首先把每一个节点都映射到一个 html 元素上,填充节点内容,并计算出每个节点尺寸和坐标,令这些html元素绝对定位到指定的位置,然后根据这些坐标,在一个背景画布上绘出连接线。
保存图片时,jsMind 将每个节点也绘制在背景画布上[1],并利用画布可以导出图片的特性,生成了图片。
此问题出现在上面[1]的地方,html5 里的 canvas 并不支持根据 html 片段绘制其被浏览器渲染后的样子,如果要画出html的节点,不仅需要自行计算该节点的大小和位置,还要处理文本的换行,复杂的样式等,相当于要实现一个 html 渲染引擎,而这就比较困难了。
所以在我目前的实现思路下,还不能很好的处理 html 节点保存为图片的问题。
from jsmind.
非常感谢您的讲解,我也在寻找方案,如果进展push给你。
from jsmind.
利用html2canvas,然后将canvas来保存数据,不知道可行不可行。有空试试。
from jsmind.
@qboy1987 感谢你的推荐,最近我试试这个方案。
from jsmind.
这个pr[https://github.com//pull/42] 对于图片的问题可以很好的解决,等测试后 @onlyoneice 可以一试。
from jsmind.
from jsmind.
html 模式下 保存图片 节点内容显示的是html代码
请问你有最新的进展吗?
from jsmind.
Related Issues (20)
- draggable-node doesn't work with requirejs HOT 5
- 能否控制节点输入字符长度事件回调 HOT 5
- 能否支持导入到xmind中,或者能导出xmind支持的格式 HOT 1
- 移动端的自适应 HOT 10
- allow images to be in nodes HOT 1
- vite build error HOT 2
- 我通过这样的方式,为何下载下来的图片是空白的呢 HOT 1
- 在不触发addnode的情况下去添加节点 出现问题 HOT 5
- Implementing draggable plugin with Iframes HOT 2
- 如何单独为每个节点设置线条颜色呢 HOT 7
- 思维导图节点使用support_html属性和<span>标签自定义,点击<span>文字无法选中节点 HOT 4
- 移动或者单击节点,会提示节点找不到 HOT 5
- 如何将生成的思维导图导出呢。我这边用jm实例绘制,拿到的jm实例数据是空的,下载下来的也是空白 HOT 10
- Error: dom-to-image is required since 0.7.2 HOT 1
- uniapp中引入jsmind时, 思维导图的线 和 结点 会分开显示, 不在一起 HOT 4
- 拖拽调整节点顺序,部分位置无法吸附上去 HOT 2
- 请问可以自定义节点样式吗? HOT 2
- 请问有没有办法动态获取jsmind的高度
- 节点删除之后未及时更新 index 属性导致与index 属性相关的方法出现异常,如find_node_after等 HOT 4
- 放大后截图,存在节点错乱问题 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsmind.