(UTC)
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 [2] 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) Export Diagram to Image (Read 15575 times)
Lyubo
God Member
*****
Offline


MindFusion team

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

Try with the method from this post: https://mindfusion.eu/Forum/YaBB.pl?num=1410270984/1#1.

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 #16 - Mar 21st, 2019 at 10:21am
Print Post  
Hi Lyubo,

I tried the same, export and open (in another window) working fine except print. May I know where I'm wrong?

  private getDiagramImage() {

    var canvas = document.querySelector('#diagram') as HTMLCanvasElement;
    return canvas.toDataURL("image/jpg", "");
  }

  public openDiagramClick(args: Object) {

    var imgSrc = this.getDiagramImage();

    var w = window.open('about:blank', 'image from canvas');
    w.document.write("<img src='" + imgSrc + "' alt='from canvas'/>");
  }

  public exportDiagramClick(args: Object) {

    var imgSrc = this.getDiagramImage();

    const link = document.createElement('a');
    link.download = 'Diagram.jpg';
    link.href = imgSrc;
    link.click();
  }

  public printDiagramClick(args: Object) {

    var imgSrc = this.getDiagramImage();

    var printWindow = window.open();
    var img = printWindow.document.createElement("img");
    img.src = imgSrc;
    printWindow.document.body.appendChild(img);
    printWindow.print();
    printWindow.close();
  }

Attached the screen shot.

Regards,
Kannan
  
Print_Diagram.png ( 27 KB | 158 Downloads )
Print_Diagram.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

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

Most likely the image is not ready, when the print method is invoked (Images are loaded asynchronously). In my test, calling print from the image.loaded handler works as expected.

Code (Javascript)
Select All
function printDiagramClick(args)
{
    var printWindow = window.open();
    var imgSrc = this.getDiagramImage();
    var img = printWindow.document.createElement("img");
    img.src = imgSrc;
    img.addEventListener("load", function ()
        {
            printWindow.document.body.appendChild(img);
            printWindow.print();
            printWindow.close();
        });
}


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 #18 - Mar 21st, 2019 at 3:30pm
Print Post  
Hi Lyubo,

     This works fine. Thank you !

     Now I want to export the image with high resolution. I tried by setting quality "1",

        canvas.toDataURL("image/png", "1");

     But the quality is not good.

     In silverlight we used to export like this,

        MindFusion.Diagramming.Silverlight.CreateImage(250);

     Is there any way to export with best quality?

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 #19 - Mar 22nd, 2019 at 9:04am
Print Post  
Hi,

You can try setting the digram's zoom factor to a higher value, before sending the exported image for printing. It should produce a higher resolution image.

Code (Javascript)
Select All
diagram.setZoomFactor(200); // will increase the size of the image.


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 #20 - Aug 5th, 2019 at 8:11am
Print Post  
Hi Lyubo,

After zoom and exporting the image, some times I'm getting file download error in the browser as "download Failed - Network Error". Attached screen shot. It works fine without zoom. May I know why?

Regards,
Kannan
  
Zoom_And_Export_Image_Download_Error.png ( 6 KB | 158 Downloads )
Zoom_And_Export_Image_Download_Error.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #21 - Aug 5th, 2019 at 8:38am
Print Post  
Does it work with zoom in other browsers?
  
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 #22 - Aug 5th, 2019 at 10:19am
Print Post  
Export itself doesn't seems working in other browsers like firefox / edge.
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #23 - Aug 5th, 2019 at 11:10am
Print Post  
Hi,

Different browsers may have different restrictions about creating/clicking DOM elements dynamically or showing new windows. For example, in Firefox you need to add the anchor element to the body, before being able to click it from code:
Code (Javascript)
Select All
//...
document.body.appendChild(link);
link.click();
link.remove();
//...


Both exporting and printing the diagram image with and without zoom with the above code work in my tests with Chrome and Firefox.

The "Failed – Network Error" seems a common one in chrome with different causes and different solutions found online.

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 #24 - Aug 9th, 2019 at 1:49pm
Print Post  
Hi,

I've written the following code to export in normal and high resolution,

private exportDiagramClick(): void {

this.exportDiagram(false);
}

private exportDiagramWithHighResolutionClick(): void {

this.exportDiagram(true);
}

private exportDiagram(withHighResolution: boolean): void {

if (this.isGridShown) {
this.hideGrid(document);
}

var currentZoomFactor = this.diagram.getZoomFactor();

if (withHighResolution) {
this.diagram.setZoomFactor(1000);
}

var imgSrc = this.getDiagramImage(document);

if (withHighResolution) {
this.diagram.setZoomFactor(currentZoomFactor);
}

if (this.isGridShown) {
this.showGrid(document);
}

const link = document.createElement('a');
link.download = 'Diagram.png';

link.href = imgSrc;
link.click();
}

To simulate this error to export with high resolution, I've zoomed the diagram to 1000 but in my actual application I'm getting this error even if it is zoomed to 250.

I've uploaded the complete code in the below url,

https://drive.google.com/open?id=1m5JCM2nszyADTM_imcoNmLHR5EknmraT

I'm using chrome browser.

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 #25 - Aug 12th, 2019 at 6:26am
Print Post  
Hi,

The issue is not related to the Diagram library but comes from how different browsers handle limitations of an Anchor element with its download attribute set. So a big enough source image can cause the Base64 string to be truncated, resulting in errors.

A way to avoid this is to use the canvas.toBlob feature, to create the image for download from the Blob object.

The following worked well in my test both in Chrome and Firefox (Internet Explorer doesn't support the toBlob method, so you'll need to implement it yourself or use alternative solution if you need to support IE):

Code (Javascript)
Select All
function getDiagramImage()
{
    var canvas = document.querySelector('#diagram');
    canvas.toBlob(function (blob)
    {
        var link = document.createElement('a');
        link.download = 'Diagram.png';

        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);

        link.click();

        window.setTimeout(function ()
        {
            URL.revokeObjectURL(link.href);
            link.remove();
        }, 50);
    });
}

function exportDiagram(withHighResolution, maxZoom)
{

    var currentZoomFactor = diagram.getZoomFactor();

    if (withHighResolution)
    {
        diagram.setZoomFactor(maxZoom);
    }

    getDiagramImage(document);

    if (withHighResolution)
    {
        diagram.setZoomFactor(currentZoomFactor);
    }
}


Regards,
Lyubo
« Last Edit: Aug 12th, 2019 at 8:07am by Lyubo »  
Back to top
 
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Export Diagram to Image
Reply #26 - Sep 4th, 2019 at 8:05am
Print Post  
I am using the same code, but it is giving error "Picture printing is not available without the desktop experience feature" and I can see the image in download folder. Please help to remove this error
  
Back to top
AIM  
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

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

This error is not related to the MindFusion.Diagramming library.

Are you trying to export/print on a Windows Server OS? If so, you need to install the Desktop Experience feature from the Server Manager tool to enable printing of images.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Export Diagram to Image
Reply #28 - Sep 5th, 2019 at 10:29am
Print Post  
Okay, thanks.Ye s this time I am doing this on server machine Is there any other way?.
Only for server machines we have to do so, not for local?
  
Back to top
AIM  
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Export Diagram to Image
Reply #29 - Sep 5th, 2019 at 12:31pm
Print Post  
Hi,

Printing should work fine on user machines with non-server OS, without taking any additional steps.

If you need to print the images on the server machine, only solution to resolve this error I know of is to enable the Desktop Experience feature.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 3 
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge