frontend.js

const $imagenSeleccionada = document.querySelector("#imagen"),
    $marcaSeleccionada = document.querySelector("#marca"),
    $imagen = document.querySelector("#imagenResultado"),
    $opacidad = document.querySelector("#opacidad"),
    $separacion = document.querySelector("#separacion"),
    $botonDescargar = document.querySelector("#botonDescargar"),
    $nombreImagen = document.querySelector("#nombreImagen"),
    $nombreMarca = document.querySelector("#nombreMarca");

let ultimoUrl, ultimoNombre; // Para cuando se descarga la imagen
// Desencadenada cuando se cambia la imagen o la marca de agua
const onCambioDeArchivo = async () => {
    if ($imagenSeleccionada.files.length != 1 || $marcaSeleccionada.files.length != 1) {
        return;
    }
    const fd = new FormData();
    fd.append("imagen", $imagenSeleccionada.files[0]);
    fd.append("marca", $marcaSeleccionada.files[0]);
    fd.append("opacidad", parseFloat($opacidad.value));
    fd.append("separacion", parseInt($separacion.value));
    const respuesta = await fetch("./api.php", {
        method: "POST",
        body: fd,
    });
    const imagenBlob = await respuesta.blob();
    const objectUrl = URL.createObjectURL(imagenBlob);
    ultimoUrl = objectUrl;
    $imagen.src = objectUrl;
}
$imagenSeleccionada.onchange = () => {
    if ($imagenSeleccionada.files.length != 1) {
        return;
    }
    const nombreArchivo = $imagenSeleccionada.files[0].name;
    ultimoNombre = nombreArchivo;
    $nombreImagen.innerHTML = nombreArchivo;
    onCambioDeArchivo();
}
$marcaSeleccionada.onchange = () => {
    if ($marcaSeleccionada.files.length != 1) {
        return;
    }
    const nombreArchivo = $marcaSeleccionada.files[0].name;
    $nombreMarca.innerHTML = nombreArchivo;
    onCambioDeArchivo();
}
[$opacidad, $separacion].forEach($elemento => $elemento.onchange = onCambioDeArchivo);


const descargar = () => {
    if (!ultimoUrl) {
        return;
    }
    const a = document.createElement("a");
    a.href = ultimoUrl;
    a.download = ultimoNombre;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
$botonDescargar.onclick = descargar;