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.