Publicado em 30 de jan.

[Resolvido] DrangDrap & Save

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?

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Guilherme Oderdenge· 30 de jan.

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· 30 de jan.

Está usando Flex, Flash ou JavaScript?

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

@braços

Dii· 30 de jan.

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· 30 de jan.

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· 30 de jan.

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· 30 de jan.

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· 30 de jan.

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· 30 de jan.

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· 30 de jan.

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

Obrigado.

hufersil· 30 de jan.

Show de bola mano!

@braços e fique com Deus!