I have index.php where I ask user to select two images to combine.. The selection is done using check boxes. User then clicks on the button on which I pass the selected image paths to MergeImages.php , the merge image.php combines the two icons with some other processing and create one image, which I need to display on the index.php just below the list of images.
Here is my code for that Index.php
var Images;
Images = listOfImages.join("|");
$.ajax({
url: 'MergeImages.php',
type: 'POST',
data: {listOfImages : Images},
success: function(data) {
alert("success");
$("#output_image").attr("src","MergeImages.php" );
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
MergeImages.php
imagecopy($dest, $src, 0,0,0,0,$swidth,$sheight);
header('Content-Type: image/png');
imagepng($dest);
The image is not displayed, what could be the problem?
You make POST request to MergeImages.php, but on success you do not use the returned data. Instead, you set image src to MergeImages.php, which calls it, but without PST arguments (it's an ordinary GET request without any arguments).
You need to use data in your success handler. This is where your response from POST request to MergeImages.php is. To do that, see the accepted answer to this question.
If possible, replacing GET with POST in MergeImages.php might make things easier for you. In that case, you wouldn't need AJAX, but you'd just set the image's src attribute to "MergeImages.php?icon1=bla&icon2=bla".
I think returning the image is not a good idea, unless every time a request is made you generate a new image.
To improve cacheability, you shoud return a response redirected to the url of the image on the server.