阵列图像使用html2canvas生成文件夹中的图像

我存储所有的孩子图像src数组中，我已经创建了示例模板和数组循环我正在更改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

你为什么声明两次可变数据？ –