[英]Array image to generate image in folder using html2canvas
我將所有子圖像src存儲在Array中,我創建了示例模板,並且在數組循環中更改了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";
}
?>
您可以通過僅使用one ajax request
來很好地避免此問題,即,在for
循環結束后進行ajax調用,直到將所有數據追加到data
變量中,然后在循環結束時僅進行一個ajax
調用。
注意:這個問題與for
循環內的ajax
調用已在許多線程中討論,請看是否有幫助:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.