- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.JavaScript pack. It includes chart, diagram, calendar, map, virtual keyboard, gauge and UI components. Here are more details and live demo for anyone interested.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Pages: 1 2  Send Topic Print  
Export Diagram to Image
Read 1568 times

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Export Diagram to Image
Jan 18th, 2019 at 6:22am
 
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
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1750
Gender: male
tech.support


   
     
 
Re: Export Diagram to Image
Reply #1 - 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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Export Diagram to Image
Reply #2 - Jan 30th, 2019 at 2:01pm
 
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
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1750
Gender: male
tech.support


   
     
 
Re: Export Diagram to Image
Reply #3 - 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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Export Diagram to Image
Reply #4 - Feb 5th, 2019 at 12:59pm
 
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

 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Export Diagram to Image
Reply #5 - Feb 5th, 2019 at 1:13pm
 
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Export Diagram to Image
Reply #6 - Feb 8th, 2019 at 6:21am
 
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 »
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Export Diagram to Image
Reply #7 - Feb 8th, 2019 at 10:20am
 
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Export Diagram to Image
Reply #8 - Mar 7th, 2019 at 2:26pm
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Export Diagram to Image
Reply #9 - Mar 7th, 2019 at 3:06pm
 
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):
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 | 22 )
Diagram-html.png
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Export Diagram to Image
Reply #10 - Mar 12th, 2019 at 11:21am
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Export Diagram to Image
Reply #11 - Mar 13th, 2019 at 7:02am
 
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):
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Export Diagram to Image
Reply #12 - Mar 13th, 2019 at 8:14am
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Export Diagram to Image
Reply #13 - Mar 13th, 2019 at 8:45am
 
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):
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Export Diagram to Image
Reply #14 - Mar 21st, 2019 at 7:31am
 
Hi Lyubo,

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

Regards,
Kannan
 
 
 
IP Logged    
 
     
Pages: 1 2  Send Topic Print