Herramientas de usuario

Herramientas del sitio


informatica:lenguajes_de_programacion:javascript:comprobar_imagen_cargada

Comprobar si la imagen existe

puesto en un return:

var image = new Image();
 
image.onload = function() {
    // image exists and is loaded
    document.body.appendChild(image);
}
image.onerror = function() {
    // image did not load
 
    var err = new Image();
    err.src = '/error.png';
 
    document.body.appendChild(err);
}
 
image.src = "../imgs/6.jpg";
getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}

usando fetch:

fetch('https://via.placeholder.com/150', { method: 'HEAD' })
    .then(res => {
        if (res.ok) {
            console.log('Image exists.');
        } else {
            console.log('Image does not exist.');
        }
    }).catch(err => console.log('Error:', err));
const getImageOrFallback = (path, fallback) => {
  return new Promise(resolve => {
    const img = new Image();
    img.src = path;
    img.onload = () => resolve(path);
    img.onerror = () => resolve(fallback);
  });
};
 
// Usage:
 
const link = getImageOrFallback(
  'https://www.fillmurray.com/640/360',
  'https://via.placeholder.com/150'
  ).then(result => console.log(result) || result)

El que me funciono:

let CargarLogoEmpresa = function(variable){
    var image = new Image();
    var url_image = variable;
    image.src = url_image;
    if (image.width == 0) {
       return 'libs/img/logo/SinLogo.jpg';
    } else {
       return url_image;
    }
 }

Validando una imagen

function validarImagen(obj){
    var uploadFile = obj.files[0];
 
    if (!window.FileReader) {
        alert('El navegador no soporta la lectura de archivos');
        return;
    }
 
    if (!(/\.(jpg|png|gif)$/i).test(uploadFile.name)) {
        alert('El archivo a adjuntar no es una imagen');
    }
    else {
        var img = new Image();
        img.onload = function () {
            if (this.width.toFixed(0) != 200 && this.height.toFixed(0) != 200) {
                alert('Las medidas deben ser: 200 * 200');
            }
            else if (uploadFile.size > 20000)
            {
                alert('El peso de la imagen no puede exceder los 200kb')
            }
            else {
                alert('Imagen correcta :)')                
            }
        };
        img.src = URL.createObjectURL(uploadFile);
    }                 
}
<input type="file" name="file" onchange="ValidarImagen(this);" />
informatica/lenguajes_de_programacion/javascript/comprobar_imagen_cargada.txt · Última modificación: 2025/04/08 02:19 por admin