1

Eu tenho um código HTML assim:

<div class="conteudoFrente">
    <div id="draggable">
        <div class="draggableFrase">

        </div>                   
    </div>
</div>

A div com a classe "conteudoFrente" tem uma imagem de fundo.

A div com id "draggable" ela pode receber até 4 imagens que o usuário envia por um formulário com 4 inputs file, e ela possui o "width:150px; height:194px" (um retângulo de pé).

A div com a classe "draggableFrase" recebe uma frase digitada pelo usuário, o mesmo formulário agora com um campo input text

OBS: eu estou usando a biblioteca jQuery UI (componentes: Draggable e Resizable). Então, quando o usuário envia a primeira imagem, ele pode arrastá-la para qualquer lugar do retângulo, e, também pode redimensioná-la. As demais imagens do mesmo jeito, podendo até colocar uma por cima da outra, porém mais a direita, deixando apenas metade de uma imagem amostra. Do mesmo modo, a frase digitada por ele também pode ser arrastada por qualquer lugar do retângulo.

A dúvida:

Eu consigo recuperar todas as imagens e a frase e salvá-los no banco de dados, porém eu não consigo saber a posição das imagens, se elas foram redimensionadas ou não, se a frase digitada está em cima, no meio ou embaixo.

Sugestão:

Tentar de alguma forma, transformar a div "conteudoFrente" em apenas uma imagem, ou pdf, ou até transformar toda a página HTML em uma url, não sei.

Eu só preciso conseguir recuperar as informações do mesmo jeito que o usuário as definiu.

Espero ter explicado direito, porém estou a disposição para responder a alguma dúvida que tenha deixado no ar.

2 Respostas 2

1

Conforme a documentação do Evento stop do Resizable Widget e do Evento stop do Draggable Widget você tem acesso a duas propriedades:

  • position (draggable | resizable)
  • size (resizable)

Que são respectivamente a posição e as dimensões do elemento que foi redimensionado e movido.

De posse desses dados, você pode criar (via JavaScript, pelo JQuery mesmo ou na mão) campos (input) do tipo oculto (type="hidden") e alocar as informações que você precisa lá e depois no PHP recuperar esses campos, da mesma forma que você faz com a frase e com as imagens...

Faça um teste:

$(".draggableFrase") /*Obtemos o elemento que armazena a frase */
.draggable() /* Ativamos a função de mover no elemento */
.resizable({ /* Ativamos a função de redimenciona no elemento */
    stop: function( event, ui ) { /* Adicionamos uma ação para o evento 'stop' */
       console.log(ui.position); /* Exibe no console a posição (left & top) */
       console.log(ui.size); /* Exibe no console as dimensões (width & height) */
    }
});

Abra o console do seu navegador (se for o Google Chrome, presisone a tecla F12 ou as teclas CTRL + SHIFT + I) e veja o que aparece na aba Console conforme você movimenta e redimensiona a frase

1

[...] transformar a div "conteudoFrente" em apenas uma imagem, ou pdf, ou até transformar toda a página HTML em uma url[...]

Você pode utilizar a biblioteca Html2Canvas para converter sua página, ou parte dela, para um DataURL - e submeter o resultado para seu servidor.

Para fins de teste, utilize o seguinte snippet:

var minhaImagem = minhaDiv.toDataURL("image/png");
window.open(myImage);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .