How to turn a div with 4 images into just one?

Question

I have an HTML code like this:

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

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

The div with the class "content" has a background image.

The div with id "draggable" it can receive up to 4 images that the user sends through a form with 4 inputs file, and it has the "width:150px; height:194px" (a standing rectangle).

The div with the class "draggableFrase" receives a phrase typed by the user, the same form now with an input text field

NOTE: I am using the library jQuery UI (components: Draggable and Resizable). So when the user sends the first image, he can drag it anywhere in the rectangle, and he can also resize it. The other images can be placed on top of each other, but on the right, leaving only half a sample image. Similarly, the phrase typed by him can also be dragged anywhere in the rectangle.

Doubt:

I can recover all the images and phrase and save them in the database, however I cannot know the position of the images, whether they have been resized or not, whether the phrase typed is above, in the middle or below.

Suggestion:

Try in some way, turn the div "contentFrente" into just an image, or pdf, or even turn the entire HTML page into a url, I don’t know.

I just need to be able to retrieve the information the way the user defined it.

I hope I explained it properly, but I’m willing to answer any questions you left on the air.

Answer 1

According to the documentation of Event stop of the Resizable Widget and of Event stop of the Draggable Widget you have access to two properties:

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

Which are respectively the position and dimensions of the element that has been resized and moved.

By possessing this data, you can create (via Javascript, by Jquery itself or at hand) fields (input) occult (type="Hidden") and allocate the information you need there and then in PHP recover those fields, the same way you do with the phrase and with the images...

Take a test:

$(".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) */
    }
});

Open your browser console (if you are Google Chrome, press the key F12 or the keys CTRL + SHIFT + I) and see what appears in the tab Console as you move and resize to phrase

Answer 2

[...] turn the div "contentFrente" into just an image, or pdf, or even turn the entire HTML page into a url[...]

You can use the library Html2canvas to convert your page, or part of it, to a DataURL - and submit the result to your server.

For testing purposes, use the following snippet:

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