Javascript Como limitar altura e largura de uma imagem em um input?

[Eduardo de Quadros]

Meu HTML:

 

<form method="POST" action="cadastro.php" id="form_cadastro">
    <table>
        <tr>
            <td><label for="foto_perfil_cad">Foto do Perfil em PNG</label></td>
            <td><input required type="file" accept="image/png" name="foto_perfil" id="foto_perfil_cad"></td>
        </tr>
    </table><br><br>
    <button onclick="validarForm();">Enviar</button>
</form><br>

 

Meu Javascript:

 

function validarForm(){
    var formCadastro = document.getElementById("form_cadastro");

    var fotoPerfilNome = document.getElementById("foto_perfil_cad").value;
    var fotoPerfilImagem = new Image(fotoPerfilNome);

    var larg = fotoPerfilImagem.width;
    var alt = fotoPerfilImagem.height;

    if(larg != alt) alert("A foto do perfil precisa ser quadrada!");
    else formCadastro.submit();
}

 

Assim não está funcionando.

[washalbano]

Se não for trabalho de escola, não faça isso!
Nem todo mundo tem a possibilidade de editar uma foto antes de enviar.

Faça com que o seu sistema reduza e corte a foto pra ficar do tamanho que coadune com seu layout.

[joseph_dev]

Concordo com washalbano. O ideal seria você implementar uma ferramenta no seu código para o cliente fazer o recorte da imagem com o mouse no momento do cadastro. Já que o sistema não vai saber se o recorte é para ser na parte de cima, na parte de baixo ou até mesmo no centro da imagem. Tem alguns plugins/ferramentas desse tipo na web.