- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.Scheduling library for HTML5 & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
Export Diagram to Image
Read 250 times

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 4
I Love MindFusion!


   
     
 
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: 1591
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
YaBB Newbies
*
Posts: 4
I Love MindFusion!


   
     
 
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: 1591
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
YaBB Newbies
*
Posts: 4
I Love MindFusion!


   
     
 
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
Full Member
***
Posts: 207
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
YaBB Newbies
*
Posts: 4
I Love MindFusion!


   
     
 
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
Full Member
***
Posts: 207
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    
 
     
Page Index Toggle Pages: 1 Send Topic Print