すべての子画像 src を配列に格納しています。サンプル テンプレートを作成し、配列ループで src を変更しており、それらを image に変換したいと考えています。ただし、最後の 4 つの配列値のみがイメージとして保存されます。これはajaxの問題ですか、それとも何ですか??
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";
}
?>