Resize image before submit form

Question

I am trying to resize two images before sending them by ajax using javascript in case the size is too big. The formdata is more than 20 fields. Attached is part of the code.

.on('core.form.valid', function (event) {
        var parameters = new FormData(document.getElementById("formulario"));
        // The fields are named 'DNI_img' and 'ficha_img'.
        $.ajax({
            url: window.location.pathname,
            type: 'POST',
            data: parameters,
            dataType: 'json',
            processData: false,
            contentType: false,
        }).done(function (data) {
            // console.log(data);
            if (!data.hasOwnProperty('error')) {
                Swal.fire({
                    icon: 'success',
                    title: '¡Tus datos han sido recibidos!',
                    text: 'Pronto nos comunicaremos contigo.',
                    confirmButtonText: '<a href="#">Ir a inicio</a>',
                })
                return false;
            }
            message_error(data.error)
        }).fail(function (data) {
            alert("error");
        }).always(function (data) {
            // alert("complete")
        });
    });

This is the form:

<form method="post" action="." id="formulario" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken"
       value="">
<input type="hidden" name="action" value="add">
<div class="row">
    <div class="col-md-4 order-md-last">
        <h3 class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-dark">Cotizador</span>
        </h3>

        <ul class="list-group mb-3">

            <li class="list-group d-flex justify-content-between lh-sm">
                <ul class="list-group">
                    <li class="list-group-item">
                        <label for="customRange3" class="form-label">Monto</label>
                        <input type="range" name="monto" class="form-range" required min="300" max="3500" step="10"
                               id="entrada_1" oninput="myFunction()" value="1000" maxlength="40">
                    </li>
                    <li class="list-group-item justify-content-between">
                        <strong id="salida_1" style="font-size: x-large; font-weight:bold">$1000</strong>
                    </li>
                </ul>
            </li>
            <li class="list-group d-flex justify-content-between lh-sm">
                <ul class="list-group">

                    <li class="list-group-item">
                        <label for="customRange3" class="form-label">Plazo meses</label>
                        <input type="range" name="plazo_meses" class="form-range" required min="6" max="30" step="1"
                               id="entrada_2" oninput="myFunction()" value="24" maxlength="40">
                    </li>
                    <li class="list-group-item justify-content-between">
                        <strong id="salida_2" style="font-size: x-large">24 meses</strong>
                    </li>

                </ul>

            </li>
            <li class="list-group-item d-flex justify-content-between bg-success">
                <div class="text-light">
                    <h5 class="my-0">Cuota <br> quincenal<span style="color:white;font-weight:bold">*</span></h5>
                </div>
                <span id="mensualidad" class="text-light" style="font-size: xx-large">$44.63</span>
            </li>
            <p><span style="color:green;font-weight:bold">*</span>La cuota calculada es aproximada. </p>
        </ul>
    </div>


    <!-- Campos de usuario -->


    <div class="col-md-8">
        <h3>Formulario de Pre-aprobación</h3>
        <small>Los campos marcados con <span style="color:red;font-weight:bold">*</span> son obligatorios</small>
        <div class="row g-3">
            <div class="col-sm-6">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Primer nombre </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="text" name="nombre_1" class="form-control" placeholder="Ingrese nombre"
                       autocomplete="off" maxlength="40" required id="id_nombre_1">
            </div>

            <div class="col-sm-6">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Segundo nombre</span></label>
                <input type="text" name="nombre_2" class="form-control" placeholder="Ingrese nombre"
                       autocomplete="off" maxlength="40" id="id_nombre_2">
            </div>

            <div class="col-sm-6">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Primer apellido </span> <span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="text" name="apellido_1" class="form-control" placeholder="Ingrese apellido"
                       autocomplete="off" maxlength="40" required id="id_apellido_1">
            </div>

            <div class="col-sm-6">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Segundo apellido</span></label>
                <input type="text" name="apellido_2" class="form-control" placeholder="Ingrese apellido"
                       autocomplete="off" maxlength="40" id="id_apellido_2">
            </div>

            <div class="col-md-6">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Tipo de documento </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="tipo_doc" class="form-select" autocomplete="off" required id="id_tipo_doc">
                    <option value="" selected>---------</option>

                    <option value="1">Cédula</option>

                    <option value="2">Pasaporte</option>

                    <option value="3">Licencia de conducir</option>

                </select>
            </div>

            <div class="col-sm-6">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Núm. de ID </span> <span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="text" name="dni" class="form-control" placeholder="Ingrese ID" autocomplete="off"
                       maxlength="20" required id="id_dni">
            </div>

            <div class="col-sm-8">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Propósito del préstamo </span> <span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="motivo" class="form-select" autocomplete="off" id="id_motivo">
                    <option value="" selected>---------</option>

                    <option value="1">Cancelación de crédito
                    </option>

                    <option value="2">Reparación/remodelación de vivienda</option>

                    <option value="3">Consolidación de deudas</option>

                    <option value="4">Pago de estudios</option>

                    <option value="5">Gastos vacacionales</option>

                    <option value="6">Gastos personales</option>

                    <option value="7">Otros</option>

                </select>
            </div>

            <div class="col-sm-4">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Fecha de nacimiento </span> <span
                        style="color:red;font-weight:bold">*</span>
                </label>
                <input type="text" name="f_nacimiento" class="form-control" placeholder="16/07/1999" required
                       id="id_f_nacimiento">
                <small id="fechaHelp" class="form-text text-muted">Debes ser mayor de 22 años.</small>
            </div>

            <div class="col-sm-6">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">E-mail </span> <span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="text" name="email_1" class="form-control" placeholder="micorreo@mail.com"
                       autocomplete="off" maxlength="254" required id="id_email_1">
            </div>

            <div class="col-sm-6">
                <label class="form-label" for="confirmEmail"><span
                        style="color:black;font-weight:bold">Confirmar e-mail </span> <span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="text" name="confirmEmail" class="form-control" placeholder="micorreo@mail.com"
                       autocomplete="off" maxlength="254" id="confirmEmail">
            </div>

            <div class="col-sm-6">
                <label for="phone" class="form-label"><span
                        style="color:black;font-weight:bold">Celular </span> <span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="text" name="celular" class="form-control" placeholder="61234567" autocomplete="off"
                       required id="id_celular">
            </div>

            <div class="col-md-4">
                <label for="country" class="form-label"><span
                        style="color:black;font-weight:bold">Estado civil </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="e_civil" class="form-select" autocomplete="off" required id="id_e_civil">
                    <option value="" selected>---------</option>

                    <option value="1">Soltero</option>

                    <option value="2">Casado</option>

                    <option value="3">Divorciado</option>

                    <option value="4">Viudo</option>

                </select>
            </div>

            <div class="col-md-4">
                <label for="country" class="form-label"><span
                        style="color:black;font-weight:bold">Género </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="genero" class="form-select" autocomplete="off" required id="id_genero">
                    <option value="" selected>---------</option>

                    <option value="1">Femenino</option>

                    <option value="2">Masculino</option>

                    <option value="3">Otros</option>

                </select>
            </div>

            <div class="col-md-4">
                <label for="country" class="form-label"><span
                        style="color:black;font-weight:bold">Personas a cargo </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="dependientes" class="form-select" autocomplete="off" required id="id_dependientes">
                    <option value="" selected>---------</option>

                    <option value="1">Ninguno</option>

                    <option value="2">1</option>

                    <option value="3">2</option>

                    <option value="4">3</option>

                    <option value="5">4</option>

                    <option value="6">5+</option>

                </select>
            </div>

            <div class="col-md-4">
                <label for="country" class="form-label"><span
                        style="color:black;font-weight:bold">Tipo de ingreso </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="tipo_ingreso" class="form-select" autocomplete="off" required id="id_tipo_ingreso">
                    <option value="" selected>---------</option>
                    <option value="1">Empresa privada</option>
                    <option value="2">Empresa pública</option>
                    <option value="3">Independiente</option>
                    <option value="4">Jubilado</option>
                </select>
            </div>
            <div class="col-sm-3">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Ingreso mensual </span> <span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="number" name="salario" class="form-control" autocomplete="off" min="100"
                       placeholder="100.00" step="0.01" required id="id_salario">
            </div>
            <div class="col-sm-5">
                <label class="form-label"><span
                        style="color:black;font-weight:bold">Nombre de empresa </span></label>
                <input type="text" name="empresa_1" class="form-control" placeholder="Ingrese nombre"
                       autocomplete="off" maxlength="50" required id="id_empresa_1">
            </div>
            <div class="col-md-4">
                <label for="country" class="form-label"><span
                        style="color:black;font-weight:bold">Ingresos extra </span></label>
                <select name="in_extras" class="form-select" autocomplete="off" required id="id_in_extras">
                    <option value="" selected>---------</option>

                    <option value="1">Bonificaciones</option>

                    <option value="2">Comisiones</option>

                    <option value="3">Trabajo adicional</option>

                    <option value="4">Ninguno</option>

                </select>
            </div>

            <div class="col-md-4">
                <label for="country" class="form-label"><span
                        style="color:black;font-weight:bold">Nivel de estudios </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="estudios" class="form-select" autocomplete="off" required id="id_estudios">
                    <option value="" selected>---------</option>

                    <option value="1">Primaria</option>

                    <option value="2">Secundaria</option>

                    <option value="3">Universidad</option>

                </select>
            </div>

            <div class="col-md-4">
                <label for="country" class="form-label"><span
                        style="color:black;font-weight:bold">Persona expuesta políticamente </span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="p_expuesto" class="form-select" autocomplete="off" required id="id_p_expuesto">
                    <option value="" selected>---------</option>

                    <option value="1">Sí</option>

                    <option value="2">No</option>

                </select>
            </div>
            <hr class="mb-1">
            <h5><strong>Dirección:</strong></h5>
            <div class="col-3">
                <label for="address" class="form-label"><span
                        style="color:black;font-weight:bold">Provincia</span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="provincia" class="form-select" required id="id_provincia">
                    <option value="" selected>---------</option>

                    <option value="1">Bocas del Toro</option>

                    <option value="2">Chiriquí</option>

                    <option value="3">Coclé</option>

                    <option value="4">Colón</option>

                    <option value="5">Darién</option>

                    <option value="6">Herrera</option>

                    <option value="7">Los Santos</option>

                    <option value="8">Panamá</option>

                    <option value="9">Panamá Oeste</option>

                    <option value="10">Veraguas</option>

                </select>
            </div>
            <div class="col-4">
                <label for="address" class="form-label"><span
                        style="color:black;font-weight:bold">Distrito</span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="distrito" class="form-select" required id="id_distrito">
                    
                </select>
            </div>

            <div class="col-5">
                <label for="address" class="form-label"><span
                        style="color:black;font-weight:bold">Corregimiento</span><span
                        style="color:red;font-weight:bold">*</span></label>
                <select name="corregimiento" class="form-select" required id="id_corregimiento">
                    <option value="" selected>---------</option>

                    

                </select>
            </div>

            <div class="col-10">
                <label for="address" class="form-label"><span
                        style="color:black;font-weight:bold">Descripción</span><span
                        style="color:red;font-weight:bold">*</span></label>
                <input type="text" name="direccion" class="form-control" autocomplete="off"
                       placeholder="Barriada, residencial o edificio" maxlength="250" id="id_direccion">
            </div>
            <hr class="mb-1">
            <div class="col-10 form-group">
                <div class="checkbox_collapse" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"
                                                       href="#collapse1">
                                ¿Deseas que prioricen tu solicitud? >> <span class="circle"></span></a></h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <h5 class="text-success"><strong>!Entonces envíanos lo siguiente!</strong></h5>
                                <div>
                                    <label class="form-label" for="DNI_img"><strong>Foto de cédula:</strong></label>
                                    <input type="file" name="DNI_img" class="form-control" lang="es"
                                           accept="image/*" id="id_DNI_img">
                                    <div class="invalid-feedback">
                                        Archivo seleccionado no es válido. Tamaño o formato no permitidos.
                                    </div>
                                </div>
                                <br>
                                <div>
                                    <label class="form-label" for="ficha_img"><strong>Foto de ficha de
                                        CSS:</strong></label>
                                    <input type="file" name="ficha_img" class="form-control" lang="es"
                                           accept="image/*" id="id_ficha_img">
                                    <div class="invalid-feedback">
                                        Archivo seleccionado no es válido. Tamaño o formato no permitidos.
                                    </div>
                                </div>
                                <br>
                                <div>
                                    <button class="btn btn-outline-warning" type="button" id="file-reset">Limpiar
                                        archivos
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <label for="address2" class="form-label"><span
                        style="color:black;font-weight:bold">Ingrese nombre de referido </span><span
                        class="text-muted">(Opcional)</span></label>
                <input type="text" name="ref" class="form-control" autocomplete="off" maxlength="100" id="id_ref">
            </div>

        </div>

        <hr class="my-4">

        <div class="form-check">
            <input type="checkbox" name="terms" class="form-check-input" required="True" id="id_terms">
            <label class="form-check-label" for="same-address"><span style="color:black;font-weight:bold">He leído y acepto los  </span><a
                    href="https://rapi-cashpanama.com/index.php/politica-de-privacidad/" target="_blank">Términos
                y Condiciones.</a> <span
                    style="color:red;font-weight:bold">*</span></label>
            <div class="invalid-feedback">
                Debe leer y aceptar los términos y condiciones para continuar.
            </div>
        </div>

        <div class="form-check">
            <input type="checkbox" name="apc" class="form-check-input" required="True" id="id_apc">
            <label class="form-check-label" for="save-info"><span style="color:black;font-weight:bold">He leído y acepto la</span>
                <a href="https://rapi-cashpanama.com/index.php/autorizacion-apc" target="_blank">Verificación
                    APC</a><span
                        style="color:black;font-weight:bold"> (requisito no excluyente). </span><span
                        style="color:red;font-weight:bold">*</span></label>
            <div class="invalid-feedback">
                Debe aceptar la verificación de la APC para continuar (requisito no excluyente).
            </div>
        </div>
        <hr class="my-4">
        <div class="form-group">
            <script src="https://www.google.com/recaptcha/api.js"></script>
            <script type="text/javascript">
                // Submit function to be called, after reCAPTCHA was successful.
                var onSubmit_b773906437164bf48d0ee4402e7cc325 = function (token) {
                    console.log("reCAPTCHA validated for 'data-widget-uuid=\"b773906437164bf48d0ee4402e7cc325\"'")
                };
            </script>

            <div class="g-recaptcha"
                 required data-sitekey="6LdB08gaAAAAAMZmG-jcL-3_QFvffJS3Wpac7VLW" id="id_captcha"
                 data-widget-uuid="b773906437164bf48d0ee4402e7cc325"
                 data-callback="onSubmit_b773906437164bf48d0ee4402e7cc325" data-size="normal"
            >
            </div>
        </div>
        <br/>
        <button class="w-100 btn-success btn-lg" type="submit" id="btn-ok">Enviar datos</button>

    </div>
</div>

The form is a bit long, however the IDs of the image fields are only 2, 'id_DNI_img' and 'ficha_img'.

Thanks in advance.