Browser crash when trying to convert html + svg to scaled image

I am using Treant.js javascript library to create an organisational chart. I used the following code to convert the SVG elements (the lines that connect the boxes) and HTML contents (the boxes):

	var useWidth = $( '#orgchart' ).prop( 'scrollWidth' ); 
	var useHeight = $( '#orgchart' ).prop( 'scrollHeight' ); 

	var scaleBy = 5;

	var w = useWidth;
	var h = useHeight;
	var scaledCanvas = document.createElement( 'canvas' );
	scaledCanvas.width = w * scaleBy;
	scaledCanvas.height = h * scaleBy;
	var scaledContext = scaledCanvas.getContext( '2d' );
	scaledContext.scale( scaleBy, scaleBy );

	html2canvas( $( "#orgchart" ), {
		canvas : scaledCanvas,
		logging : false,
		onrendered : function ( canvas ) {

			$( "#orgChartSketchDivBody" ).html( "<canvaS id=\"orgChartSketch\"></canvas>" );

			var sketchCanvas = document.getElementById( 'orgChartSketch' );
			var sketchContext = sketchCanvas.getContext( '2d' );
			sketchCanvas.width = w * scaleBy;
			sketchCanvas.height = h * scaleBy;
			sketchContext.drawImage( canvas, 0, 0 );
			sketchContext.scale( ( w * scaleBy ) / ( h * scaleBy ), ( w * scaleBy ) / ( h * scaleBy ) );

			var imgData = sketchCanvas.toDataURL( 'image/png' );
			}
	} );

This works fine as long as the chart is small. But for large charts, when rendered, the browser freezes and crashes (I am using latest Chrome). I know the scale value 5 is high, but I need high quality images so as to get readable images of large charts. Is there any solution to stop the browser from crashing?

[eKoopmans]

Hi @tanzid203, looking at your code I’m a bit confused why you’ve created sketchCanvas. If your goal is to get imgData, you can use .toDataURL() directly on the canvas given by the onrendered function. Also, your final scale could simplify to sketchContext.scale(w/h, w/h), though I’m not sure the purpose of that scale, since it only affects drawing done on it after the scale.

Other than that, I’m not sure about your performance issues, sorry!

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don’t have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.