Télécharger le résultat d'un drag n drop

Bonjour,
Je cherche une solution pour pouvoir donner la possibilitée à l'internaute de técharger le résultat du drag n drop effectué
Merci pour votre aide !:)

Bonjour et bienvenue sur le forum.

Qu'entends-tu par " télécharger le résultat du drag n drop " ?

N'hésite pas à nous fournir ton code pour y voir plus claire.
Cordialement.

Merci pour ton retour !
Alors je suis en train de réaliser une carte postale.
On peut ecrire dedans (un textaera) et y glisser des "pictos".
Maintenant je veux pouvoir télécharger le résultat de la carte postale (le texte et le visuel intégrer dans la carte postale)

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head lang="fr">
    <meta charset="UTF-8">
    <title>Exercice Javascript</title>
 
    <style>
         #packt1, #packt2 {float:left; width:650px; height:450px;margin:11px;padding:11px;border:3px solid navy;}
         #packt2 {background-image: url(card.jpg);}
         #packt2 img{width:600px; height:400px;}
         *{text-align:center;}
                 p{margin:30px;padding:15px;}
 
                 #myP1{background:lightblue;}
                 #myP2{background:lightgreen;}
                 #myP3{background:lightyellow;}
                 @font-face  { font-family: "black_jack"; src: url('black_jack.ttf');}
 
                 textarea {
                        font-family:'black_jack';
                        font-size: 22px;
                        background-color: transparent;
 
}
 
    </style>
 
 </head>
 
 
    <body>
 
 
		<div id = "packt2" ondrop = "drop(event)" ondragover = "dropItem(event)"></div> 
 
		            <div>
 
		                <label for="copie"></label>
		                <textarea  id="copie" type="text" style="position: absolute;left: 46px;top: 250px;width: 600px;height: 200px;"></textarea>
 
		            </div>
 
		<a href="" download>Télécharger votre carte postale</a> ou <br />
 
		<label for="Excel"></label><input type="button" value="Export" onClick=javascript:Excel("")>
 
 
 
 
<!-- Drag & Drop -->
 
	<div  ondragover="pd(event)" ondrop="pd(event);drop(event)"  style="width:290px;height:290px;float:left;margin:25px;border:1px black solid;background:#fee;">
	  <p id="myP1" draggable="true" ondragstart="drag(event)"><img src="parapluie.png" alt""/></p>
	  <p id="myP2" draggable="true" ondragstart="drag(event)">Soleil</p>
	  <p id="myP3" draggable="true" ondragstart="drag(event)">Bisous</p>
	</div>
	<div  ondragover="pd(event)" ondrop="pd(event);drop(event)" ></div>
 
 
 
 
		<script>
                function pd(e){
                        e.preventDefault();
                }
        
                function drag(e){
                        e.dataTransfer.setData("temp", e.target.id);    
                }
 
                function drop(e){
                de=document.getElementById(e.dataTransfer.getData("temp")); //Draged Element Selected By ID
                tar=e.target //Target
                // These Conditions Are To Prevent Droping Three Paragraphs in Themselves 
                //You Can Test It Without this Condition.
                        if(e.target.parentNode.nodeName!="P"){
                                if((tar.nodeName=="DIV")||(tar.firstChild.nodeName="P"&&de.childNodes.length!=2))
                                {
                                        tar.appendChild(de);
                                }
                        }       
                }
 
                </script>
 
		<script>
                    
                    var texte = document.getElementById('texte'),
                    copie = document.getElementById('copie');
 
                texte.onkeyup = function () {
                    copie.value = texte.value;
                };
                </script>
 
 
		<script>
                         function dropItem(ev) { 
                   ev.preventDefault();}
                      function drag(ev){
                 ev.dataTransfer.setData("Text",ev.target.id);      }
                      function drop(ev) {        ev.preventDefault();        var abc = ev.dataTransfer.getData("Text");        ev.target.appendChild(document.getElementById(abc));      } 
                </script>
 
		<script>
                                function Excel (ext){
                                        document.FormulaireVersExcel.submit ()
                                }
                </script>
 
	</body>
</html>

Il me semble me souvenir que j'ai vu passer un script sur la base d'un canvas qui permettait de faire cela,

sinon coté serveur avec par exemple gdlib tu construit l'image et tu en fais un forcedownload
http://mtodorovic.developpez.com/php/gd/?page=page_1

aide js

Merci pour ton aide je vais aller tester ça de suite !

aide en js

Pas mal du tout !
J'étais persuadé qu'il existerait un script tout fait sans passer par le php pour enregistrer l'image mais en fait si il faut et quelque par c'est logique.
Ce n'est pas un problème pour moi je connais le php. J'ai été consulté php.net pour en savoir plus : http://php.net/manual/fr/book.image.php
et là effectivement tu as les fonctions pour télécharger ton image, une vraie mine aux trésors.
Merci beaucoup je commence bien ma journée !

Comme sus-dit, avec canvas coté client
http://www.html5canvastutorials.com/...g-as-an-image/