How to transform a div with 4 images in only one?

Navigation
1

I have an HTML code like this: 

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

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

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

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

The div with draggableFrase class receives a user-entered phrase, the same form now with an input text field

NOTE: I am using the jQuery UI library (components: Draggable and Resizable) . Then, when the user submits the first image, it can drag it anywhere in the rectangle, and can also resize it. The other images in the same way, you can even put one on top of the other, but to the right, leaving only half of a sample image. Similarly, the phrase you type can also be dragged anywhere in the rectangle.

The question:

I can recover all the images and the phrase and save them in the database, however I can not know the position of the images, whether they have been resized or not, if the phrase you entered is in the middle or bottom.

Suggestion:

Try to somehow transform the "contentDial" div into just one image, or pdf, or even turn the entire HTML page into a url, I do not know.

I just need to be able to retrieve information the same way the user has defined them.

I hope I have explained it right, but I am willing to answer any questions you may have left.

    
asked by anonymous 31.07.2014 / 02:46

2 answers

1

According to the Resizable Widget Stop event and stop 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.

In the possession of this data, you can create (via JavaScript, by JQuery same or in hand) input fields of the hidden type type="hidden" and allocate the information you need there and then in PHP retrieve those fields, just as 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's console (if it's Google Chrome, press the F12 key or the CTRL + SHIFT > I ) and see what appears on the Console tab as you move and resize the phrase     

01.08.2014 / 07:43
1
  

[...] transform the "contentDial" div into just one image, or pdf,   or even turn the entire HTML page into a url [...]

You can use the Html2Canvas library 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);
    
01.08.2014 / 14:53
Does anyone know a good program to create database in mysql? [closed] What is the name of the Pinterest content effect?