1

No jQuery o similares

Los href que se almacenan en la variable link son imágenes que no se encuentran en el DOM

Quiero guardar los valores del alto y ancho de X número de imágenes de diferentes proporciones con un ciclo for, pero la manera en la que lo estoy haciendo no funciona (me genera ceros) ya que la imagen no ha terminado de cargar. Esto es lo que llevo:

var img = document.getElementsByClassName('post-image');
var link, w, h;

var margenes = [];

for(var i = 0; i < img.length; i++){
    // La url de la imagen
    link = img[i].parentElement.href;

    // Agregar <img src="link"> al DOM, esto va dentro de un <div>
    document.getElementById('thread').insertAdjacentHTML('afterbegin', '<div id="lightbox"><img id="lightbox-img" src="' + link + '"></div>');

    // Obtener los valores de alto y ancho
    var lightboxImg = document.getElementById('lightbox-img');
    w = lightboxImg.width;
    h = lightboxImg.height;

    // Guardar una cadena de texto en el arreglo con los datos de alto y ancho
    margenes.push("-" + h/2 + "px 0px 0px -" + w/2 + "px");


    console.log(margenes[i]);

    // Eliminar la imagen del DOM
    document.getElementById('lightbox').parentNode.removeChild(document.getElementById('lightbox'));
}

La línea

console.log(margenes[i]);

me genera -0px 0px 0px -0px

Todo lo quiero guardar en el arreglo margenes ya que esa cadena la utilizo después para agregar CSS. Si existe una manera de guardar en las variables h y w los valores del alto y ancho antes de que cargue la imagen o de alguna otra manera que no requiera meter la imagen al DOM les pido que me lo hagan saber.

2
  • pues tu error es que en javascript no existe la propiedad width o height de un elemento html, la propiedad es la siguiente lightboxImg.clientWidth. Para ser mas preciso, existen 3 propiedades, scrollWdith clientWidth y por ultimo offsetWidth, las primeras dos propiedades te dan el tamaño del contenido del elemento y su padding (espacio entre el borde y el contenido) y la última propiedad te da lo mismo agregando el tamaño de los bordes. Ya te dieron una respuesta creando un objeto Image pero creo que es válido que sepas esto.
    – LPZadkiel
    Commented el 23 mar. 2018 a las 14:05
  • quisiera corregir lo que dije anteriormente: clientWidth te da el contenido mas el padding de lo que es visible, offsetWidth te da lo mismo mas los bordes y por último scrollWidth te da el contenido completo del elemento incluyendo padding (sin considerar bordes), por ejemplo, si tenemos un elemento que es 600X600 en el que tenemos dentro un elemento que es 800X800, clientWidth te retornara 600 mientras que scrollWidth te retornara 800.
    – LPZadkiel
    Commented el 23 mar. 2018 a las 14:21

2 respuestas 2

1

Prueba con la función getBoundingClientRect(), que te devuelve la posición y tamaño de un elemento HTML. Por ejemplo:

let images = document.querySelectorAll('.post-images');

for (let image of images) {
  let imageSize = image.getBoundingClientRect();
  console.log(`width: ${imageSize.width}, height: ${imageSize.height}`);
}
1
  • hay un problema con el getBoundingClientRect y es que te da las dimensiones de los objetos dentro de window, es decir, dentro de lo que es visible y por ende si estas haciendo scroll y el objeto no se ve por completo este método no te dará los valores correctos.
    – LPZadkiel
    Commented el 23 mar. 2018 a las 14:11
1

window.onload = function {...} Lo que hace es primero cargar la página y luego ejecutar la función. Dentro de esta tendrás que poner el for. Si aún así no funciona el código a seguir es el siguiente:

window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("browse"),
  elPreview = document.getElementById("preview"),
  useBlob = false && window.URL; // Set to `true` to use Blob instead of Data-URL

// 2.
function readImage() {

  // Creauna nueva instancia de FileReader 
  // https://developer.mozilla.org/en/docs/Web/API/FileReader
  var reader = new FileReader();
  var file = document.getElementById('browse').files[0];
  reader.readAsDataURL(file);

  // Una vez ya ha sido leído:
  reader.addEventListener("load", function() {

    // En este punto `reader.result` contiene Base64 Data-URL
    // y podriamos mostrar inmediatamente la imagen usando
    // `elPreview.insertAdjacentHTML("beforeend", "<img src='"+ reader.result +"'>");`
    // Pero buscamos el ancho y el alto de la imagen en px
    // Como el archivo Objeto no contiene el tamaño de la imagen
    // Necesitamos crear una nueva imagen y asignar su src asi que
    // cuando la image este cargada podemos calcular el alto y ancho de esta
    var image = new Image();
    image.src = reader.result;
    image.addEventListener("load", function() {

      // Concatenatar nuestro HTML image info 
      var imageInfo = file.name + ' ' + // Obtener el valor del 'name' desde el archivo obj
        image.width + '×' + // Obtener el ancho de nuestra imagen
        image.height + ' ' +
        file.type + ' ' +
        Math.round(file.size / 1024) + 'KB';

      // Finally append our created image and the HTML info string to our `#preview` 
      elPreview.appendChild(this);
      elPreview.insertAdjacentHTML("beforeend", imageInfo + '<br>');

    });
  });

}
#preview img {
  height: 100px;
}
<input id="browse" type="file" multiple onchange="readImage()">
<div id="preview"></div>

4
  • 1
    te edite el JS ya que te faltaba un ");" :P
    – lois6b
    Commented el 17 may. 2017 a las 7:07
  • @lois6b gracias, me estaba volviendo loco porque me saltaba error en mi código Commented el 17 may. 2017 a las 7:26
  • haha si, es una locura mirar donde es. Para eso te recomiendo darle a "ordenar" el codigo. Ahi verás que lineas están mal indentadas y sabes mejor donde esta el error heheh
    – lois6b
    Commented el 17 may. 2017 a las 7:27
  • @lois6b lo tendré en cuenta para la próxima vez, gracias de nuevo Commented el 17 may. 2017 a las 7:28

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.