1

Tengo la siguiente función:

function checkMeasure(file, picFile){

          var image = new Image();

          image.src = picFile.result;

          var resp = image.onload = function() {
                        // Allow image size
                        if(this.width < 301 && this.height < 301){
                            return true;
                        }else{
                            alert('La imatge ' + file.name + ' es sobrepasa de les medides permeses.');
                            return false;
                        }
                    };
          alert (resp);

          return resp;

        }

La finalidad de la misma es que me retorne true ó false según si el ancho y el alto de una imagen cumplen una serie de requisitos.

No hay manera de que me devuelva un booleano. Siempre me devuelve la función en txt:

He buscado por Internet y la sintaxis que creo es la que os pongo en el ejemplo.

2 respuestas 2

2

El problema es que estas definiendo resp como una variable que contiene una función, y luego le estas diciendo que muestre mediante un alert a resp y lo que hace es mostrarte lo que es resp , que es una funcion, y luego retornas resp y igualmente te muestra que es una función, para que se ejecute resp y obtengas el valor true o false , tienes que ejecutarla usando () , te muestro un ejemplo usándolo y sin usarlo:

function mensaje(){
 return 1 +2;

}

alert("Llamada sin ejecutarla: " + mensaje)
alert("Llamada ejecutándola: " + mensaje())

Nota: tienes que valorar cuando deseas que se ejecute la función, por lo que noto quieres obtener este valor cuando ocurra el evento onload de la imagen, no creo que lo necesites si ya creas tu new Image() y le asignas una ruta a la imagen , luego puedes preguntar por sus dimensiones seguidamente, creo que te funcionara.

1
  • Efectivamente era tan sencillo como llamar a resp(), me devuelve true or false que a su vez utilizo desde la función de importar imágenes para permitir o no. Por otro lado el objeto Image() no devuelve la medida de la imagen hasta que no se lanza el evento onload. Gracias!
    – ruzD
    Commented el 2 feb. 2018 a las 8:44
1

El evento onload de la imagen es asíncrono, por lo que cuando devuelves resp no estás devolviendo el resultado de image.onload sino simplemente la definición de la función asociada al evento.

La solución old school para esto es pasarle a la función un callback que se llame cuando la imagen carga. Esta función por tanto no necesita retornar nada. Simplemente llama al callback cuando ocurre el evento.

function checkMeasure(src,cb){
  var image = new Image();
  image.onload = function() {
      if(this.width < 301 && this.height < 301){
        cb(true,'La imagen se ajusta al tamaño permitido');
      } else {
        cb(false,'La imagen sobrepasa el tamaño permitido');
      }
  };
  
  image.src = src;
}

var url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png';
checkMeasure(url, function (respuesta, mensaje) {
   console.log('la respuesta es ',respuesta);
   console.log('el mensaje es:',mensaje);
});

2
  • No conocia callback, gracias por el apunte.
    – ruzD
    Commented el 2 feb. 2018 a las 8:46
  • Ojo que poco a poco los callbacks están pasando a ser obsoletos, debido a que un software complejo tiene callbacks dentro de callbacks dentro de callbacks (callback hell). Por eso hoy se trabaja con promesas, y las promesas han evolucionado a las funciones asíncronas y el uso de await.
    – ffflabs
    Commented el 2 feb. 2018 a las 10:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.