To set max width/height of image during export - Diagramming Components

(UTC)

MindFusion Forums › Diagramming Components › JavaScript › To set max width/height of image during export

(Moderator: Slavcho)

‹ Previous Topic | Next Topic ›

Pages: 1

To set max width/height of image during export (Read 1549 times)

Kannan Thirumal Senior Member Offline I Love Mind Fusion Diagram :-) Posts: 284 Location: Bangalore, India Joined: Jan 18^th, 2019	To set max width/height of image during export Aug 29^th, 2024 at 1:45pm	Print Post
	Hi, var dataUrl = canvas.toDataURL("image/png", ""); We are converting the canvas to image using the above code. May I know how to set max width and height of the image? Regards, Kannan


	IP Logged

Slavcho YaBB Moderator Offline tech.support Posts: 3435 Joined: Oct 19^th, 2005	Re: To set max width/height of image during export Reply #1 - Aug 30^th, 2024 at 5:52am	Print Post
	Hi Kannan, CanvasRenderingContext2D contains this drawImage overload that lets you specify source and destination rectangles: Code ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) You could use that to draw cropped or scaled part of the diagram canvas on another canvas and export the latter: Code var exportCanvas = document.createElement("canvas"); exportCanvas.width = 100; exportCanvas.height = 100; const ctx = exportCanvas.getContext("2d"); ctx.drawImage(diagramCanvas, 0, 0, 500, 500, 0, 0, 100, 100); var dataUrl = exportCanvas.toDataURL("image/png", ""); Regards, Slavcho Mindfusion


	IP Logged

Kannan Thirumal Senior Member Offline I Love Mind Fusion Diagram :-) Posts: 284 Location: Bangalore, India Joined: Jan 18^th, 2019	Re: To set max width/height of image during export Reply #2 - Sep 11^th, 2024 at 12:09pm	Print Post
	Hi Slavcho, Thank you for the sample code. This works but I'm facing an issue. When I reduce the size, the exported image is not clear. For example, I exported the image with initial width as 1315 and height as 1138. Then I exported with 1/2 the width and height. It is not very clear. I tried by exporting 1/3rd, 1/4th, 1/5th width and height of the source canvas. Even the text is not readable from the 1/3rd size. I've attached the original canvas image (canvas-normal.png) and the reduced images (canvas-fit-2.png, ..., canvas-fit-5.png). Please check it. Also, I've attached the code file (diagram-export.service.ts). Please let me know how to resolve this issue. Thank you! Regards, Kannan
	« Last Edit: Sep 12^th, 2024 at 4:57am by Kannan Thirumal »
	canvas-reduce.zip ( 213 KB \| 105 Downloads )
	IP Logged

Slavcho YaBB Moderator Offline tech.support Posts: 3435 Joined: Oct 19^th, 2005	Re: To set max width/height of image during export Reply #3 - Sep 12^th, 2024 at 5:15am	Print Post
	Hi Kannan, I guess that's how bitmap scaling works. Instead of drawImage, try creating a second DiagramView displaying same diagram on the exportCanvas (check MultipleViews.js example from distribution). You should be able to control the export scale and source region by means of second view's scrollX,scrollY,zoomFactor properties. Regards, Slavcho Mindfusion


	IP Logged

Kannan Thirumal Senior Member Offline I Love Mind Fusion Diagram :-) Posts: 284 Location: Bangalore, India Joined: Jan 18^th, 2019	Re: To set max width/height of image during export Reply #4 - Sep 12^th, 2024 at 5:24am	Print Post
	Hi Slavcho, Thank you for the suggestion. Could you please send me the link for the "MultipleViews.js example from distribution" which you are referring? I couldn't find it Thanks! Regards, Kannan


	IP Logged

Slavcho YaBB Moderator Offline tech.support Posts: 3435 Joined: Oct 19^th, 2005	Re: To set max width/height of image during export Reply #5 - Sep 12^th, 2024 at 5:34am	Print Post
	Hi Kannan, Once you unzip JsDiagram.zip, check JsDiagram\Samples\JavaScript\MultipleViews.* files. In your case, you'd be creating diagramView2 on top of exportCanvas instead. Regards, Slavcho Mindfusion


	IP Logged

Pages: 1

‹ Previous Topic | Next Topic ›