0

Recibo una URL de una imagen desde una BBDD. Lo que busco es obtener el ancho y el alto de la imagen para formar un carrusel. Para ello instancio un objeto imagen dentro de un bucle for, pero las dimensiones no las obtengo porque todavía no se carga. Para solucionarlo utilizo onload, pero no logro bindear el dato dentro de la funcion onload para recibirlo en $data en el componente de Vue js.

La estructura de dataphoto es correcta, si lo prueba fuera de onload funciona correctamente.

dataphoto": [
{
  "id_foto": "107",
  "nombre": "Chrysanthemum.jpg",
  "ruta": "picsloaded/93/Chrysanthemum.jpg",
  "toma": "93",
  "width": 0,
  "height": 0
}

....
]




 getPictureData: function() {
  var self = this;
  var foto = [];
   for (var i = 0; i < this.dataphoto.length; i++) {

    foto = new Image();
    foto.src = "/static/api/" + this.dataphoto[i].ruta;

   foto.onload = (function(nr){

          self.dataphoto[nr]["width"] = foto.width;
          self.dataphoto[nr]["height"] = foto.height;


   })(i);
  }

},

1
  • No has asignado nada a foto.onload con ese código, puesto que la función no devuelve nada Commented el 3 oct. 2017 a las 12:30

3 respuestas 3

1

He logrado solucionar utilizando este código...

getPictureData: function() {
  var self = this;
  var foto = [];
   for (var i = 0; i < this.dataphoto.length; i++) {


    foto = new Image();
    foto.src = "/static/api/" + this.dataphoto[i].ruta;

   foto.onload = (function(nr){

    var photoWidth = foto.width;
    var photoHeight = foto.height;
      return function (){

        console.log(nr, foto.width, photoWidth, photoHeight)
        console.log(self.dataphoto)
          self.dataphoto[nr]["width"] = photoWidth ;
          self.dataphoto[nr]["height"] = photoHeight;
      }

   })(i);

   var loadedPhoto = foto.onload;
   loadedPhoto();
  }

},

1
  • La carga de imágenes es asíncrona, dado que utilizas la misma variable foto, el código que presentas tendrá errores o resultados inesperados.
    – Ricky Ruiz
    Commented el 4 oct. 2017 a las 17:18
1

Tan simple como:

const newphotos = [];
this.dataphoto.forEach((photo) => {
  const img = new Image();
  img.onload = () => {
    const { width, height } = img;
    newphotos.push({ ...photo, width, height });
  };
  img.src = photo.url;
});
this.dataphoto = newphotos;

El nuevo array newphotos es por si quieres que el DOM se actualice luego de obtener las dimensiones.

5
  • Ese es básicamente el código que tratas de hacer, pero es probable tengas problemas por concepto de asincronía, en ese caso es mejor hacerlo de forma recursiva.
    – gugadev
    Commented el 3 oct. 2017 a las 14:04
  • Qué tal Guz, concuerdo con tu respuesta, solo tengo un comentario/duda. ¿Hay alguna razón por la cual utilizas el estilo DOM0 para asignar el evento load? ¿Por qué no usar addEventListener? Entiendo que solo se asignará un evento, pero igual la última opción presentada es más flexible. En este caso al utilizar ES6 no estamos preocupándonos por compatibilidad.
    – Ricky Ruiz
    Commented el 4 oct. 2017 a las 17:44
  • @Ricky Buena pregunta. Cuando usas addEventListener añades los listeners a una cola, esto te permite añadir múltiples listeners que se ejecutarán secuencialmente. En este caso no nos interesa esa funcionalidad, así que optamos por el onload (sobreescribe cualquier listener previo). Aún así, como img es una variable local no hay diferencias entre usar onload o addEventListener. Saludos.
    – gugadev
    Commented el 4 oct. 2017 a las 17:49
  • Gracias @Guz, si entiendo el funcionamiento de addEventListener quería saber tu opinión sobre seguir utilizando DOM0 ya que muchos desarrolladores no lo recomiendan. Gracias nuevamente. Saludos.
    – Ricky Ruiz
    Commented el 4 oct. 2017 a las 17:52
  • 1
    @Ricky oh disculpa, entendí mal en el móvil =). Respondiendo a tu pregunta, no es recomendado cuando trabajas con elementos controlados, en este caso no tiene sentido que se use el DOM ya que esto lo hace Vue "virtualmente" para luego ser reflejado en el real. Pero como se trata de un elemento no controlado, esto es perfectamente factible.
    – gugadev
    Commented el 4 oct. 2017 a las 17:55
-1

El problema viene de este código:

foto.onload = (function(nr) {
  self.dataphoto[nr]["width"] = foto.width;
  self.dataphoto[nr]["height"] = foto.height;
})(i);

que es equivalente a lo siguiente:

let func=function (nr) {
  self.dataphoto[nr]["width"] = foto.width;
  self.dataphoto[nr]["height"] = foto.height;
}
let callback=func(i);
foto.onload=callback;

Como ves, defines a una función, a la que llamas con el parámetro i y el resultado (que es undefined, ya que no devuelve nada) lo asignas a foto.onload.

Seguramente lo que intentas hacer es algo como:

function callbackGenerator(nr) {
  return function () {
    self.dataphoto[nr]["width"] = foto.width;
    self.dataphoto[nr]["height"] = foto.height;
  }
}

foto.onload=callbackGenerator(i);
1
  • Gracias por tu ayuda... justamente lo solucione con una solución parecida, voy a revisar ambas respuestas para entender bien lo que sucede... Commented el 3 oct. 2017 a las 13:40

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.