Add support to display images in nodes #42
Conversation
ant.png image is from http://www.art4apps.org/ and is released under a Creative Commons Attribution-NonCommercial-ShareAlike license. (CC BY-NC-SA)
A image defined by the url to a local file taint the canvas and the screenshot funtionality don't work. This commit add to 2_features.html the logic to add a image node, and add support to process the dataurl in the canves. The image is scaled to reduce the data size.
Freemind format support is not added, because image nodes are not supported apparently by FreeMind. From http://freemind.sourceforge.net/wiki/index.php/Main_Page#Features "Weak spots include: The support of pictures in nodes is in preliminary stage. When you want to carry a map around with you, you have to take care that you take the image files with you."
| this._watermark(); | ||
| var url = jsm.canvas_elem.toDataURL(); | ||
| jsm.clean(); | ||
| return url; |
There was a problem hiding this comment.
True. Probably the only way to return this value is using a callback function. What you think?
Also, I didn't found a use of shootAsDataURL()
There was a problem hiding this comment.
let me think about it, there must be a way out
There was a problem hiding this comment.
What you think about:
shootAsDataURL:function(callback){
this.init();
this._watermark();
var jsm = this;
this._draw(function() {
var url = jsm.canvas_elem.toDataURL();
jsm.clean();
callback(url);
});
},
|
great idea and wonderful work. i will merge it after full testing. thank you very much. |
|
Thanks. I wait for your comments and will do the improvements needed. Different question: do ou plan merge #39 ? |
|
Tell me when you finish the review, and I will send a new pr to replace #42 with the fixes |
|
#39 merged |
| var img = this; | ||
| if(c.getContext) { | ||
| var ctx = c.getContext('2d'); | ||
| ctx.drawImage(img, 2, 2, imageSize, imageSize); |
There was a problem hiding this comment.
i don't think fixed size is good, but i have no idea about how to improve it :(
There was a problem hiding this comment.
The user can change the default image in the options, or we can add logic to enlarge the image later. In the last case, we will need preserve the original image if we don't want get pixelated images. In my use case, I am focused in simple use for kids.
There was a problem hiding this comment.
s/default image/default image size/
Mind maps are useful tools in education. One feature usually requested when are used by kids is the support of images in nodes.
This pull request add support to add nodes where a image is displayed, without text. Load/save and screenshots are implemented.
The image can be noted by a url or the data url. In the case od a image noted by a url pointing to a local resource, like the example implemented, a screenshot is not possible, because the canvas is tainted. When the image is selected by the user (or stored as data in the json file) there are no problems.