[Resolvido] DrangDrap & Save

Marlon Souza · Janeiro 30, 2012

Prezados fiz uma página onde o usuário pode fazer upload de uma imagem e posteriormente brincar com ela, colocando elementos via DragDrap, até ai deu tudo certo agora preciso fazer com que seja salvo esses elementos em cima da imagem, como faço pra conseguir essa proeza?

Guilherme Oderdenge · Janeiro 30, 2012

Você consegue saber as modificações que o cliente fez? Se sim, crie uma $_SESSION para quando começar as modificações e um botão para salvá-las quando o cliente parar de "brincar".

Depois, ao clicar em salvar e novamente na $_SESSION, armazene os dados que foram alterados e aplique sobre a imagem.

Entendeu? :thumbsup:

hufersil · Janeiro 30, 2012

Está usando Flex, Flash ou JavaScript?

Tem algum endereço que possamos ver como está implementado para podermos ajudar?

@braços

Dii · Janeiro 30, 2012

Infelizmente... Não sou adivinho!

Poste seu código e esclareça melhor a sua dúvida para que possamos saná-la.

:rolleyes:

Marlon Souza · Janeiro 30, 2012

Segue Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>DragnDrop Demo - Onextrapixel</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
   <script type="text/javascript">
   /*
* dragndrop
* version: 1.0.0 (05/13/2009)
* @ jQuery v1.2.*
*
* Licensed under the GPL:
*   http://gplv3.fsf.org
*
* Copyright 2008, 2009 Jericho [ thisnamemeansnothing[at]gmail.com ] 
*  usage:
*  
*/
//(function($) {
   $.extend($.fn, {
       getCss: function(key) {
           var v = parseInt(this.css(key));
           if (isNaN(v))
               return false;
           return v;
       }
   });
   $.fn.Drags = function(opts) {
       var ps = $.extend({
           zIndex: 20,
           opacity: .7,
           handler: null,
           onMove: function() { },
           onDrop: function() { }
       }, opts);
       var dragndrop = {
           drag: function(e) {
               var dragData = e.data.dragData;
               dragData.target.css({
                   left: dragData.left + e.pageX - dragData.offLeft,
                   top: dragData.top + e.pageY - dragData.offTop
               });
               dragData.handler.css({ cursor: 'move' });
			dragData.target.css ({ cursor: 'move' });
               dragData.onMove(e);
           },
           drop: function(e) {
               var dragData = e.data.dragData;
               dragData.target.css(dragData.oldCss); //.css({ 'opacity': '' });
               dragData.handler.css('cursor', dragData.oldCss.cursor);
               dragData.onDrop(e);
               $().unbind('mousemove', dragndrop.drag)
                   .unbind('mouseup', dragndrop.drop);
           }
       }
       return this.each(function() {
           var me = this;
           var handler = null;
           if (typeof ps.handler == 'undefined' || ps.handler == null)
               handler = $(me);
           else
               handler = (typeof ps.handler == 'string' ? $(ps.handler, this) : ps.handle);
           handler.bind('mousedown', { e: me }, function(s) {
               var target = $(s.data.e);
               var oldCss = {};
               if (target.css('position') != 'absolute') {
                   try {
                       target.position(oldCss);
                   } catch (ex) { }
                   target.css('position', 'absolute');
               }
               //oldCss.cursor = target.css('cursor') || 'default';
			oldCss.cursor = 'move';
               oldCss.opacity = target.getCss('opacity') || 1;
               var dragData = {
                   left: oldCss.left || target.getCss('left') || 0,
                   top: oldCss.top || target.getCss('top') || 0,
                   width: target.width() || target.getCss('width'),
                   height: target.height() || target.getCss('height'),
                   offLeft: s.pageX,
                   offTop: s.pageY,
                   oldCss: oldCss,
                   onMove: ps.onMove,
                   onDrop: ps.onDrop,
                   handler: handler,
                   target: target
               }
               target.css('opacity', ps.opacity);
			target.css('cursor', 'move');
               $().bind('mousemove', { dragData: dragData }, dragndrop.drag)
                   .bind('mouseup', { dragData: dragData }, dragndrop.drop);
           });
       });
   }
//})(jQuery); 
   </script>
   <script type="text/javascript">
   $().ready(function() {
$('.dv1').Drags({
	handler: '.handler',
	onMove: function(e) {
		$('.content').html('current pos:(Left:' + e.pageX + ' ,Top:' + e.pageY + ')');
	},
	onDrop: function(e){
		$('.content').html('box dropped! <br />current pos:(Left:<strong>' + e.pageX + '</strong> ,Top:<strong>' + e.pageY + '</strong>)');
	}
});

$('.dv2').Drags({
	handler: '.gb',                
	zIndex:200,
	opacity:.9
});

$('.dv3').Drags({
	handler: '.gb',                
	zIndex:200,
	opacity:.9
});
});
   </script>
<style>
* {border:none; margin:0; padding:0;}
body {background:#fff url(demobg.jpg) repeat-x;}
#head {height:190px;}
#head h1 {margin:17px 0 22px 0; height:51px;}
#head .demoads {padding-top:20px; width:728px; height:90px;}


body,html { font-family:Calibri, sans-serif; font-size:12px; height:1000px; line-height:18px; }
#wrap{	margin:0 auto; width:900px; border:1px solid;}
p { height:30px; }
.dv1 { width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:300px; }
.dv1 div { padding:5px; margin-bottom:10px; }
.dv2 {  position:absolute; cursor:move; left:400px; top:330px; }
.dv3 {  position:absolute; cursor:move; left:300px; top:530px; }
.dv2 .content2 { padding:5px; margin-bottom:10px; }
</style>
</head>

<body>
<div id="wrap">
<div class="dv1">

   <div class="content"><img src="images/Koala.jpg"></div>
</div>

<div class="dv2"><div class="gb">
  <div class="content2"><img src="images/img1.png"></div>
</div></div>


<div class="dv3"><div class="gb">
  <div class="content2"><img src="images/img2.png"></div>
</div></div>

</div>
</body>
</html>

o que quero fazer é somente salvar o que ta na div #wrap

Marlon Souza · Janeiro 30, 2012

Sabe aqueles sites onde você tem uma foto e coloca bigode, chapel, óculos, e outros objetos vetorizados na imagem e deixa para salvar, então é essa a aplicação que teho que fazer, enfim toda a interação eu ja fiz agora preciso somente conseguir gerar uma imagem a partir da div principal

hufersil · Janeiro 30, 2012

Bom, meu server tá fora.. quando voltar coloco os arquivos.

Mas, se quiser ir adiantando:

Crie dois arquivos:

index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Imagens</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function(){
	$('.available li img').draggable();
	$('#area-itens').droppable({
		hoverClass: 'x-active',
		drop: function(evt, ui){

			if(ui.draggable.parent()[0] == this){
				return;
			}

			var t = $(this);
			var e = ui.draggable;
			var diff = {x: evt.pageX - e.offset().left, y: evt.pageY - e.offset().top};

			var parent = e.parent();
			e.appendTo(t);
			parent.remove();

			// calculando novo posicionamento
			e.css({
				position: 'absolute',
				left: evt.pageX - t.offset().left - diff.x,
				top: evt.pageY - t.offset().top - diff.y
			});
		}
	});

	$('#btnSalvar').click(function(evt){
		var s = $('.status'), data={}, area = $('#area-itens'), pageSize = {width:area.width(),height:area.height()}, itens=[];
		area.find('.itens').each(function(){
			var t=$(this), item = {
				src: this.src, 
				width: t.width(), 
				height: t.height(),
				x: t.position().left,
				y: t.position().top
			};
			itens.push(item);
		});

		data.area = pageSize;
		data.itens = itens;

		s.html('Aguarde..');
		$.post('gerar.php', data, function(link){
			s.html('Imagem gerada: <a target="_blank" href="'+link+'">Clique aqui para baixar</a>');
		});
	});
});

</script>	

<style type="text/css">
	#area-itens {
		position: relative;
		float: left;
		width: 300px;
		height: 450px;
		border: 1px solid black;
		overflow: hidden;
	}

	.available {
		float: right;
	}

	.buttons {
		clear: both;
	}

</style>

</head>
<body>

<div id="area-itens">


</div>


<ul	class="available">
	<li><img src="imagens/imagem1.jpg" class="itens" /></li>
	<li><img src="imagens/imagem2.jpg" class="itens" /></li>
	<li><img src="imagens/imagem3.jpg" class="itens" /></li>
	<li><img src="imagens/imagem4.jpg" class="itens" /></li>
</ul>

<div class="buttons">
	<input type="button" value="Salvar Imagem" id="btnSalvar" />
</div>

<div class="status"></div>

</body>
</html>

gerar.php

<?php

date_default_timezone_set('America/Sao_Paulo');

$width = empty($_POST['area']['width']) ? 300 : sprintf('%d', $_POST['area']['width']);
$height = empty($_POST['area']['height']) ? 450 : sprintf('%d', $_POST['area']['height']);

// criamos a imagem e colocamos um fundo branco
$img = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($img, 255, 255, 255);
imagefilledrectangle($img, 0, 0, $width, $height, $white);

// para cada imagem enviada
if(!empty($_POST['itens'])){
foreach($_POST['itens'] as $item){
	if(!empty($item['src'])){
		$filename = 'imagens/' . pathinfo($item['src'], PATHINFO_BASENAME);
		if(file_exists($filename)){
			$w = sprintf('%d', $item['width']);
			$h = sprintf('%d', $item['height']);
			$x = sprintf('%d', $item['x']);
			$y = sprintf('%d', $item['y']);

			$item = imagecreatefromstring(file_get_contents($filename));

			imagecopy($img, $item, $x, $y, 0, 0, $w, $h);
		}
	}
}
}

$imageFileName = 'geradas/imagem-'.time().'.jpg';
imagejpeg($img, $imageFileName, 90);

echo $imageFileName;

Cria duas pastas no mesmo diretorio dos arquivos:

imagens - coloque suas imagens originais aqui

geradas - pasta onde as imagens geradas serão salvas. Não esqueça de alterar o permissionamento para escrita.

Acesse via um browser.

@braços e fique com Deus!

-----------------------

Meu site voltou.

Os arquivos estão em:

http://www.hufersil.com.br/exemplo/drag-drop.zip

@braços e fique com Deus!

Marlon Souza · Janeiro 30, 2012

Hufersil, é EXATAMENTE isso que preciso porem preciso colocar a imagem principal de fundo, vou verificar aqui.

Bom, meu server tá fora.. quando voltar coloco os arquivos.

Mas, se quiser ir adiantando:

Crie dois arquivos:

index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Imagens</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function(){
	$('.available li img').draggable();
	$('#area-itens').droppable({
		hoverClass: 'x-active',
		drop: function(evt, ui){

			if(ui.draggable.parent()[0] == this){
				return;
			}

			var t = $(this);
			var e = ui.draggable;
			var diff = {x: evt.pageX - e.offset().left, y: evt.pageY - e.offset().top};

			var parent = e.parent();
			e.appendTo(t);
			parent.remove();

			// calculando novo posicionamento
			e.css({
				position: 'absolute',
				left: evt.pageX - t.offset().left - diff.x,
				top: evt.pageY - t.offset().top - diff.y
			});
		}
	});

	$('#btnSalvar').click(function(evt){
		var s = $('.status'), data={}, area = $('#area-itens'), pageSize = {width:area.width(),height:area.height()}, itens=[];
		area.find('.itens').each(function(){
			var t=$(this), item = {
				src: this.src, 
				width: t.width(), 
				height: t.height(),
				x: t.position().left,
				y: t.position().top
			};
			itens.push(item);
		});

		data.area = pageSize;
		data.itens = itens;

		s.html('Aguarde..');
		$.post('gerar.php', data, function(link){
			s.html('Imagem gerada: <a target="_blank" href="'+link+'">Clique aqui para baixar</a>');
		});
	});
});

</script>	

<style type="text/css">
	#area-itens {
		position: relative;
		float: left;
		width: 300px;
		height: 450px;
		border: 1px solid black;
		overflow: hidden;
	}

	.available {
		float: right;
	}

	.buttons {
		clear: both;
	}

</style>

</head>
<body>

<div id="area-itens">


</div>


<ul	class="available">
	<li><img src="imagens/imagem1.jpg" class="itens" /></li>
	<li><img src="imagens/imagem2.jpg" class="itens" /></li>
	<li><img src="imagens/imagem3.jpg" class="itens" /></li>
	<li><img src="imagens/imagem4.jpg" class="itens" /></li>
</ul>

<div class="buttons">
	<input type="button" value="Salvar Imagem" id="btnSalvar" />
</div>

<div class="status"></div>

</body>
</html>

gerar.php

<?php

date_default_timezone_set('America/Sao_Paulo');

$width = empty($_POST['area']['width']) ? 300 : sprintf('%d', $_POST['area']['width']);
$height = empty($_POST['area']['height']) ? 450 : sprintf('%d', $_POST['area']['height']);

// criamos a imagem e colocamos um fundo branco
$img = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($img, 255, 255, 255);
imagefilledrectangle($img, 0, 0, $width, $height, $white);

// para cada imagem enviada
if(!empty($_POST['itens'])){
foreach($_POST['itens'] as $item){
	if(!empty($item['src'])){
		$filename = 'imagens/' . pathinfo($item['src'], PATHINFO_BASENAME);
		if(file_exists($filename)){
			$w = sprintf('%d', $item['width']);
			$h = sprintf('%d', $item['height']);
			$x = sprintf('%d', $item['x']);
			$y = sprintf('%d', $item['y']);

			$item = imagecreatefromstring(file_get_contents($filename));

			imagecopy($img, $item, $x, $y, 0, 0, $w, $h);
		}
	}
}
}

$imageFileName = 'geradas/imagem-'.time().'.jpg';
imagejpeg($img, $imageFileName, 90);

echo $imageFileName;

Cria duas pastas no mesmo diretorio dos arquivos:

imagens - coloque suas imagens originais aqui

geradas - pasta onde as imagens geradas serão salvas. Não esqueça de alterar o permissionamento para escrita.

Acesse via um browser.

@braços e fique com Deus!

-----------------------

Meu site voltou.

Os arquivos estão em:

http://www.hufersil.com.br/exemplo/drag-drop.zip

@braços e fique com Deus!

hufersil · Janeiro 30, 2012

Tenta fazer essa parte (de colocar uma imagem principal de fundo) sozinho.

Qualquer dúvida, poste o código do que fizer pra gente dar uma olhada :thumbsup:

@braços e fique com Deus!

Marlon Souza · Janeiro 30, 2012

Hufersil, Consegui basta colocar a imagem desejada na div id="area-itens" e setar a classe class="itens".

Obrigado.

hufersil · Janeiro 30, 2012

Show de bola mano!

@braços e fique com Deus!

Arquivado

[Resolvido] DrangDrap & Save

Recommended Posts

Marlon Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante