• 0
Sign in to follow this  
AndreZero

Gerar imagem de textos em uma DIV

Question

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!!!

Edited by AndreZero

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Basically, I have some different tricks because I know about it because I have done so many projects and for that, I have some different tricks you just go and print it for that must need a printer by which you will be very helpful. For further you will just browse epson scanner driver

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this