Como transformar o resultado de orgchart em imagem

03/01/2019
Pessoal, gostaria de criar um bot�o para exportar o conte�do gerado por esse c�digo em imagem (o conte�do final n�o � uma imagem), tentei fazer com o canvas mas ele desconfigura tudo quando tem v�rias caixinhas 😕
<html>
<head>
	<script type="text/javascript" src="https://organograma-sas.000webhostapp.com/jquery.min.js"></script>
	<script type="text/javascript" src="https://organograma-sas.000webhostapp.com/jquery.orgchart.min.js"></script>
	<link rel="stylesheet" href="https://organograma-sas.000webhostapp.com/jquery.orgchart.min.css">
	<script type="text/javascript">
	'use strict';

	(function($)
	{
		$(function() 
		{

			var datascource = 
			{'name': '�rea1', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo1</Div>', 'className': 'DIR',  
				'children': 
				[
					{'name': '�rea2', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo2</Div>', 'className': 'GER'},
					{'name': '�rea3', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo3</Div>', 'className': 'DEPTO',
						'children': 
						[
							{ 'name': '�rea4', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo4</Div>', 'className': 'GER' }
						]
					},
					{'name': '�rea5', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo5</Div>', 'className': 'DEPTO',
						'children':
						[
							{'name': '�rea6', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo6</Div>', 'className': 'GER' },
							{'name': '�rea7', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo7</Div>', 'className': 'GER' },
							{'name': '�rea8', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea12', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea13', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea14', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea15', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea16', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea17', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea18', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
							{'name': '�rea19', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo9</Div>', 'className': 'GER',
								'children':
								[
									{'name': '�rea10', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo10</Div>', 'className': 'DEMAIS' }
								]
							}
						]
					},
					{'name': '�rea11', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo11</Div>', 'className': 'DEPTO'}
				]
			};
			var oc = $('#chart-container').orgchart(
			{
				'data' : datascource,
				'nodeContent': 'title',
				verticalLevel: 4,
				visibleLevel: 300,
				'initCompleted': function($chart) 
				{
					$chart.find('.node:first').css('border-color', 'DIGITAR COR AQUI, POR EXEMPLO BLUE');
				}

			});

			$('#Zoom_out').on('click', function () 
			{
				var $container = oc.$chartContainer;
				var $chart = oc.$chart;
				var scale = $container.width()/$chart.outerWidth(true);
				var x = ($container.width() - $chart.outerWidth(true))/2*(1/scale);
				var y = ($container.height() - $chart.outerHeight(true))/2*(1+scale);
				oc.setChartScale($chart, scale);
				var val = $chart.css('transform');
				$chart.css('transform', val + ' translate(' + x + 'px,' + y + 'px)');
				$("#Zoom_out").toggle();
				$('#Zoom_in').show();
			});
		
			$('#Zoom_in').on('click', function () 
			{
				oc.$chart.css('transform','none');
				$("#Zoom_in").toggle();
				$('#Zoom_out').show();
			});

		});

	})(jQuery);
	
	</script>

	<style>
	#chart-container {
		font-family: Arial;
		border: 0px dashed #aaa;
		border-radius: 0px;
		overflow: auto;
		text-align: center;
	}

	.orgchart {
		background: #fff;
	}

	.orgchart td.left, .orgchart td.right, .orgchart td.top {
		border-color: #808080;
	}
	.orgchart td>.down {
		border-color: #808080;
	}
	.orgchart .VP .title {
		background-color: #00008B;
	}
	.orgchart .VP .content {
		border-color: #00008B;
	}
	.orgchart .DIR .title {
		background-color: #FF8C00;
	}
	.orgchart .DIR .content {
		border-color: #FF8C00;
	}
	.orgchart .DEPTO .title {
		background-color: #4682B4;
	}
	.orgchart .DEPTO .content {
		border-color: #4682B4;
	}
	.orgchart .GER .title {
		background-color: #A9A9A9;
	}
	.orgchart .GER .content {
		border-color: #A9A9A9;
	}
	.orgchart .DEMAIS .title {
		background-color: #DEB887;
	}
	.orgchart .DEMAIS .content {
		border-color: #DEB887;
	}

	.BotaoCinza {
		background-color: #A9A9A9;
		border: none;
		color: white;
		border-radius: 2px;
		padding: 2px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
		margin: 4px 2px;
		cursor: pointer;
	}
	
	.BotaoLaranja {
		background-color: #FF8C00;
		border: none;
		color: white;
		border-radius: 2px;
		padding: 2px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
		margin: 4px 2px;
		cursor: pointer;
	}
	
	#Zoom_in {
		display: none;
	}
	</style>
</head>
<body>
	<button class="BotaoCinza" id="Zoom_in">Zoom in</button>
	<button class="BotaoCinza" id="Zoom_out">Zoom out</button>
	<img src="" id="img1" border="0" />	
	<div id="chart-container"></div> 
</body>
</html>
Grato pela ajuda!!!
Andre Luiz
Curtir t�pico + 0
Responder