Page Index Toggle Pages: [1] 2 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) Export Diagram to Image (Read 15388 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Export Diagram to Image
Jan 18th, 2019 at 6:22am
Print Post  
Hi,

     We can export the diagram to image in mindfusion silverlight diagram lite. May I know whether the same is possible in html/js?

Thanks & Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Export Diagram to Image
Reply #1 - Jan 18th, 2019 at 9:31am
Print Post  
Hi,

The HTML canvas element is already an image. You could encode it to some format by calling e.g. canvas.toDataURL("image/png"). Here's many examples using that method -

https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pd
f

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Export Diagram to Image
Reply #2 - Jan 30th, 2019 at 2:01pm
Print Post  
Hi Slavcho,

We have an silverlight application (which has diagram like process flow/fishbone etc) developed with mind fusion diagramlite. Now we are rewriting the same with html5, angular and typescript.

From the below link I understood mind fusion has diagram typescript support,
https://mindfusion.eu/javascript-diagram.html

and an simple angular application in the below link,
https://mindfusion.eu/Forum/YaBB.pl?num=1531413146/1

May I know how to find/download more angular sample diagram?

Thanks & Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Export Diagram to Image
Reply #3 - Jan 30th, 2019 at 2:21pm
Print Post  
Hi,

We don't have other angular examples, except last post here -
https://mindfusion.eu/Forum/YaBB.pl?num=1548835998/1#1

Otherwise there are TypeScript DOM-API based ones available in the distribution's Samples folder.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Export Diagram to Image
Reply #4 - Feb 5th, 2019 at 12:59pm
Print Post  
Hi,

I'm using typescript and got the diagram object as below,

import Diagram = MindFusion.Diagramming.Diagram;

this.diagram = Diagram.create(document.querySelector('#diagram'));

May I know how to get the canvas object which can be used to convert to image using the below code,

var img = canvas.toDataURL("image/png", "");

Regards,
Kannan

Slavcho wrote on Jan 18th, 2019 at 9:31am:
Hi,

The HTML canvas element is already an image. You could encode it to some format by calling e.g. canvas.toDataURL("image/png"). Here's many examples using that method -

https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pd
f

Regards,
Slavcho
Mindfusion

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #5 - Feb 5th, 2019 at 1:13pm
Print Post  
Hi,

The argument passed to the Diagram.create method is actually the Canvas DOM element. You can get it with document.querySelector('#cavasElementId').

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Export Diagram to Image
Reply #6 - Feb 8th, 2019 at 6:21am
Print Post  
Hi,

Ok. Thanks ! I could see the js diagram documentation in the below link,

https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm

Do we have similar documentation for typescript?

Regards,
Kannan

Slavcho wrote on Jan 30th, 2019 at 2:21pm:
Hi,

We don't have other angular examples, except last post here -
https://mindfusion.eu/Forum/YaBB.pl?num=1548835998/1#1

Otherwise there are TypeScript DOM-API based ones available in the distribution's Samples folder.

Regards,
Slavcho

« Last Edit: Feb 8th, 2019 at 8:35am by Kannan Thirumal »  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #7 - Feb 8th, 2019 at 10:20am
Print Post  
Hi,

The documentation is only in JavaScript.

We provide definitions files - jsdiag.d.ts and jscommon.d.ts - a samples project with different examples, written in TypeScript (in the .\Samples\TypeScript folder), plus an Angular example (in the .\Samples\Angular folder).

These are available in the JavaScript Diagram Library package, available here: https://mindfusion.eu/javascript-diagram.html.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Export Diagram to Image
Reply #8 - Mar 7th, 2019 at 2:26pm
Print Post  
Hi,

I want to export the diagram through code like this,

var canvas = document.createElement("canvas");
let diagram = new Diagram(canvas);
let factory = <any>diagram.getFactory();

let node1 = factory.createShapeNode(10, 10, 20, 10);
let node2 = factory.createShapeNode(10, 50, 20, 10);
let node3 = factory.createShapeNode(50, 100, 20, 10);

factory.createDiagramLink(node1, node2);

var img = canvas.toDataURL("image/png", "");

const link = document.createElement('a');
link.download = 'Diagram-html.png';
link.href = img;
link.click();

But this doesn't seems working. Any idea why? Thank you !

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #9 - Mar 7th, 2019 at 3:06pm
Print Post  
Hi,

The diagram's CANVAS element, should be nested in a parent DIV container and before exporting the image data, you'll need to call the repaint method manually. In addition to that, you need to call the Diagram.create initializer and not the diagram's constructor directly.

The following changes to your code, produce the expected results in my test:
Code (Javascript)
Select All
var canvasParent = document.createElement("div");
var canvas = document.createElement("canvas");
canvasParent.appendChild(canvas);
let diagram = Diagram.create(canvas);
let factory = <any>diagram.getFactory();

let node1 = factory.createShapeNode(10, 10, 20, 10);
let node2 = factory.createShapeNode(10, 50, 20, 10);
let node3 = factory.createShapeNode(50, 100, 20, 10);

factory.createDiagramLink(node1, node2);

diagram.repaint();

var img = canvas.toDataURL("image/png", "");

const link = document.createElement('a');
(<any>link).download = 'Diagram-html.png';
link.href = img;
link.click(); 



Regards,
Lyubo
  

Diagram-html.png ( 22 KB | 169 Downloads )
Diagram-html.png
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Export Diagram to Image
Reply #10 - Mar 12th, 2019 at 10:21am
Print Post  
Hi Lyubo,

That works. Thanks ! But the diagram having composite nodes are not working. Below is sample code,

var canvasParent = document.createElement("div");
var canvas = document.createElement("canvas");
canvasParent.appendChild(canvas);
let diagram = Diagram.create(canvas);
let factory = <any>diagram.getFactory() as Factory;

var node = new this.OrgChartNode2();

node.setMainImage("./../../../../Main.png");
node.setFirstImage("./../../../../One.png");
node.setSecondImage("./../../../../Two.png");
node.setThirdImage("./../../../../Three.png");
node.setFourthImage("./../../../../Four.png");
node.setNoOfElementsText("8");

diagram.addItem(node);

diagram.repaint();

var img = canvas.toDataURL("image/png", "");

const link = document.createElement('a');
link.download = 'Diagram-html.png';
link.href = img;
link.click();


OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2",
{
component: "GridPanel",
id: "id",
rowDefinitions: ["*"],
columnDefinitions: ["22"],
children:
[
{
component: "GridPanel",
rowDefinitions: ["18", "5"],
columnDefinitions: ["18", "5"],
children:
[
{
gridColumn: 0,
component: "Image",
name: "MainImage",
autoProperty: true,
location: "MainImage.png",
margin: "3",
imageAlign: "TopLeft"
},
{
gridColumn: 0,
component: "Image",
name: "FirstImage",
autoProperty: true,
location: "FirstImage.png",
margin: "3, 3, 0, 0",
imageAlign: "TopLeft"
},
{
gridColumn: 1,
component: "Image",
name: "SecondImage",
autoProperty: true,
location: "SecondImage.png",
margin: "3, 3, -50, 5",
imageAlign: "TopRight"
},
{
gridColumn: 1,
component: "Image",
name: "ThirdImage",
autoProperty: true,
location: "ThirdImage.png",
margin: "3, 30, -50, 3",
imageAlign: "TopRight",
width: "3"
},
{
gridColumn: 1,
component: "Image",
name: "FourthImage",
autoProperty: true,
location: "FourthImage.png",
margin: "3, 50, -50, 3",
imageAlign: "BottomRight",
width: "3"
},
{
gridColumn: 0,
component: "Text",
name: "NoOfElementsText",
autoProperty: true,
text: "title",
margin: "3, 40, 0, 0",
font: "Verdana 12px",
textAlign: "BottomLeft"
},
]
},
]
});

Images are not exported. Only text is exported. May I know why this didn't work for me?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #11 - Mar 13th, 2019 at 6:02am
Print Post  
Hi,

Most likely when you copy the canvas to the exported image, the node children images are not loaded. Try calling your export from a timeout:
Code (Javascript)
Select All
setTimeout(function ()
{
    var img = canvas.toDataURL("image/png", "");

    const link = document.createElement('a');
    link.download = 'Diagram-html.png';
    link.href = img;
    link.click();
}, 100); 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Export Diagram to Image
Reply #12 - Mar 13th, 2019 at 7:14am
Print Post  
Hi Lyubo,

Yes, this works. Thank you !

I noticed the same when the same diagram is rendered in the browser also. ie. the images are loading slowly. Any idea why this happens?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #13 - Mar 13th, 2019 at 7:45am
Print Post  
Hi,

DOM Image elements are loaded asynchronously, that's why the delay is needed. A more robust approach will be to handle the images' load event and do the repaint and export only after the last image has been loaded. In your case, something like:

Code (Javascript)
Select All
var loadedImages = 0, numberOfImages = 5;
function onImageLoad()
{
    loadedImages++;
    if (loadedImages >= diagram.getNodes().length * numberOfImages) // all images are loaded, export now
    {
        diagram.repaint();

        var img = canvas.toDataURL("image/png", "");

        var link = document.createElement('a');
        link.download = 'Diagram-html.png';
        link.href = img;
        link.click();
    }
}

//after nodes are created, attach the handler
for (var i = 0; i < diagram.getNodes().length; i++)
{
	var item = diagram.getNodes()[i];

	item.getComponent("MainImage").image.addEventListener("load", onImageLoad.bind(item));
	item.getComponent("FirstImage").image.addEventListener("load", onImageLoad.bind(item));
	item.getComponent("SecondImage").image.addEventListener("load", onImageLoad.bind(item));
	item.getComponent("ThirdImage").image.addEventListener("load", onImageLoad.bind(item));
	item.getComponent("FourthImage").image.addEventListener("load", onImageLoad.bind(item));
} 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Export Diagram to Image
Reply #14 - Mar 21st, 2019 at 6:31am
Print Post  
Hi Lyubo,

     Thank you. May I know how to print the diagram?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 3 
Send TopicPrint