siempre gracias por todo el mundo de stackoverflow
Hice un div e incluye background-image: url(imageURL) como este código
HTML > <div ref={mapRef} className="image-container" style={{ backgroundPosition: '0 0' }} > {markersState} </div> CSS > .image-container { width: 1024px; height: 768px; cursor: grab; user-select: none; background-image: url("/images/map.png"); background-position: 0 0; background-repeat: no-repeat; }Quiero obtener el tamaño de la fuente de la imagen de fondo (='/images/map.png') ¿Cómo puedo obtenerlo? (ancho de la fuente: 2907 px, altura: '3460 px')
si necesito usar en lugar de una imagen de fondo, esa solución puede ser buena para mí Además, ¿hay una buena biblioteca, recomiéndame por favor?
Gracias que tengas un buen día
Si desea obtener el ancho y la altura reales de una imagen de fondo, puede seguir estos pasos
Obtenga la URL de la imagen de fondo como esta ( https://stackoverflow.com/a/45010803/1391805 )
var css = document.getElementById("myElem").style.backgroundImage; var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");Una vez que tenga la URL de la imagen, haga esto
var newImg = new Image(); newImg.onload = function(e) { console.log( this.naturalWidth ); // This is the width you are looking for console.log( this.naturalHeight ); // .. similarly the height. } newImg.src = "img.jpg";Dado el hecho de que esto carga una imagen primero, es posible que desee usar esto con cuidado, si esto es algo que no se aplica a muchas imágenes en una sola página, entonces esto puede no ser una degradación del rendimiento, pero si la escala es más grande entonces usted puede considerar algo mejor que cargar una imagen en el lado del cliente para obtener su dimensión real.