html2canvas를 사용하여 폴더에 이미지를 생성하는 배열 이미지

모든 자식 이미지 src를 Array에 저장하고 있습니다. 샘플 템플릿을 만들고 배열 루프에서 src를 변경하고 이미지에서 변환하려고합니다. 마지막 4 개의 배열 값만 이미지로 저장됩니다. 이 아약스 문제 또는 무엇입니까 ??html2canvas를 사용하여 폴더에 이미지를 생성하는 배열 이미지

HTML 코드 :

<div id="present_sample" style="display:"> 
<img id="one" src="img/Tulips.jpg" /> 
<img id="two" class="alignright" src="img/Tulips.jpg" /> 
<br/> 
<img id="three" src="img/Tulips.jpg" /> 
<img id="four" class="alignright" src="img/Tulips.jpg" />

jQuery 코드 :

$('#convert').click(function() 
{ 
var images = $('#links a').children('img').map(function(){ 
return $(this).attr('src') }).get(); 
    console.log(images); 

    //$('#gallery_pic').append(images); 
    var side=1; 
     var data; 
    for (i = 0; i < images.length; i++) { 


     console.log('Top i is '+i); 
     console.log('Group*******'); 
     console.log(i+','+images[i]); 
     $('#one').attr("src", images[i++]); 
     console.log(i+','+images[i]); 
     $('#two').attr("src", images[i++]); 
     console.log(i+','+images[i]); 
     $('#three').attr("src", images[i++]); 
     console.log(i+','+images[i]); 
     $('#four').attr("src", images[i]); 
     console.log('Group Ends'); 
     html2canvas([document.getElementById('present_sample')], { 
    onrendered: function (canvas) { 
     $('canvas').html(canvas); 
     var data = canvas.toDataURL('image/png'); 
     // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server 

     $.ajax({ 
      type: "POST", 
      url: 'download.php', 
      data: { 
      image: data}, 
      success:function(data) { 
      alert('Ajax return is'+data); 

      } 
      }); 

     } 

     }); 

});

PHP 코드 :

<?php 
if (isset($_POST["image"]) && !empty($_POST["image"])) { 

    // get the image data 
    $data = $_POST['image']; 

    list($type, $data) = explode(';', $data); 
    list(, $data)  = explode(',', $data); 
    $data = base64_decode($data); 

    //Image name 
    //$filename ="image". md5(uniqid()) . '.png'; 
    $filename ="image". md5(uniqid()) . '.jpg'; 

    $file = "download/".$filename; 

    // decode the image data and save it to file 
    file_put_contents($file,$data); 

    echo "successfully downloaded in folder"; 


} 
?>

출처

2014-01-15 anam

왜 당신이 선언됩니다 도움이된다면 for 루프 내부 ajax 호출이 문제를 살펴, 많은 스레드에서 논의 된 두 번 변수 데이터? –