Html2canvas dans une boucle

Bonjour, j'ai un script qui affiche une centaine de divs et j'aimerais générer une image pour chaque div.

Voici la structure :

<div class="enseigne">
	<p>A</p>
	<span class="idd" style="display:none">129</span>
</div>

<div class="enseigne">
	<p>B</p>
	<span class="idd" style="display:none">129</span>
</div>

<div class="enseigne">
	<p>C</p>
	<span class="idd" style="display:none">129</span>
</div>

.......

Et voici mon javascript

	<script type="text/javascript">
		$(".enseigne").each(function(){
			//get the div content
			div_content = document.querySelector('.enseigne')
			id=$(this).find('span').text();
			//make it as html5 canvas
			html2canvas(div_content).then(function(canvas) {
				//change the canvas to jpeg image
				data = canvas.toDataURL('image/jpeg');
				var data=data.replace(/^data:image\/(png|jpeg);base64,/, "");
				//then call a super hero php to save the image
				save_img(data,id);
			});
		});
	</script>

Ma fonction save_img(data,id):

	<script type="text/javascript">
		function save_img(data,id){
			//ajax method.
			$.post('save_jpg.php?nom='+id, {data: data}, function(res){
				//if the file saved properly, trigger a popup to the user.
				if(res != ''){
					yes = console.log(res);
					if(yes){
						location.href ='http://monurl.com/output/'+res+'.jpg';
					}
				}
				else{
					alert('something wrong');
				}
			});
		}
	</script>

Problème: cela fonctionne mais seulement pour la dernière image.

J'ai l'impression que "html2canvas(div_content).then(function(canvas) {" ne s'execute qu'une seul fois et ne suis pas la boucle $(".enseigne").each
Modifié par remif (19 May 2016 - 09:38)

Bonjour,

Je ne connais pas ce html2canvas, donc je ne sais pas trop comment ça fonctionne...

Mais ton problème ne serait corrigerait-il pas pas comme cela :

$(".enseigne").each(function(){
	// get the div content
	div_content = $(this)
	// ... suite du code...
})