I am trying to use a form with two images, and then download both images to local when submitted the form. But both images are downloaded as the same image.
In HTML I have this fields:
<img src="data:image/jpeg;base64,UklGRoog..." id="foto_muestra__url_val">
<img src="data:image/jpeg;base64,/9j/4AAQ..." id="foto_monton__url_val">
Then I have this JS Called when Form Submitted:
var selectFotoMonton = document.getElementById("foto_monton__url_val");
var selectedFotoMonton_url = selectFotoMonton.src;
var selectFotoMuestra = document.getElementById("foto_muestra__url_val");
var selectedFotoMuestra_url = selectFotoMuestra.src;
$.ajax({
type: "POST",
url: "procesos/procesar_imagenes.php",
data: {
encodedFotoMuestra: encodeURIComponent(selectedFotoMuestra_url),
encodedFotoMonton: encodeURIComponent(selectedFotoMonton_url)
},
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
done: function(data){
//uniqid_code_ = data.responseText;
},
success: function(data){
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
And then, in the file procesos/procesar_imagenes.php :
if (ISSET($_POST['encodedFotoMonton'])){
$isFotoMontonSaved = saveImage($_POST['encodedFotoMonton'], true);
$isFotoMuestraSaved = saveImage($_POST['encodedFotoMuestra'], false);
}
And then, I have the function saveImage() before this code in the same file:
function saveImage($base64img_encoded, $isMonton){
$previousDir = '';
//define('UPLOAD_IMAGES_DIR', $previousDir.'/Imagenes/');
//define('UPLOAD_IMAGES_DIR', '../Imagenes/');
$fileExtension = "jpeg";
$isFileImage = true;
$base64img = rawurldecode($base64img_encoded);
//base64_decode // DEPRECATED FOR BASE64 - FORMAT IN HTML-URL DECODER
if (str_contains($base64img, 'data:image/jpeg')) {
$fileExtension = "jpeg";
$base64img = str_replace('data:image/jpeg;base64,', "", $base64img);
} else if (str_contains($base64img, 'data:image/jpg')) {
$fileExtension = "jpg";
$base64img = str_replace('data:image/jpg;base64,', "", $base64img);
} else if (str_contains($base64img, 'data:image/png')) {
$fileExtension = "png";
$base64img = str_replace('data:image/png;base64,', "", $base64img);
} else if (str_contains($base64img, 'data:image/gif')) {
$fileExtension = "gif";
$base64img = str_replace('data:image/gif;base64,', "", $base64img);
} else if (str_contains($base64img, 'data:image/tiff')) {
$fileExtension = "tiff";
$base64img = str_replace('data:image/tiff;base64,', "", $base64img);
} else if (str_contains($base64img, 'data:image/webm')) {
$fileExtension = "webm";
$base64img = str_replace('data:image/webm;base64,', "", $base64img);
} else {
$isFileImage = false;
}
if ($isFileImage){
$selected_img = 'muestra';
if ($isMonton) {
$selected_img = 'monton';
}
$file_img = '../Imagenes/temp_' . $selected_img . '.' . $fileExtension;
if (file_exists($file_img)) {
unlink($file_img);
}
$file_action = file_put_contents($file_img, $base64img);
if ($file_action){
return $base64img; // Mandar mensaje de Imagen Procesada
} else {
return $base64img; // Mandar mensaje de Imagen no procesada
}
} else {
return 'No se han detectado las imágenes. '.$base64img;
}
}
And the results as images:
There's something I am not doing well but I don't know where or why it happens. I always test with different images, for Monton image and Muestra image.
Monton = Mount image Muestra = Preview image
Thanks in advance! If something it's bad explained, please tell me.
