Obtenir la largeur de l'image hauteur de javascript

Bien, j'ai ce code:

    (function() {

    var img = document.getElementById('my_image');

    //Original
    var width, height;

    //Display
    var d_width = img.width;
    var d_height = img.height;

    var updateDetail = function() {
        document
            .getElementById('display_size')
            .innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;

        document
            .getElementById('native_size')
            .innerHTML = 'Original Size: ' + width + ' x ' + height;
    };

    //Using naturalWidth/Height
    if (img.naturalWidth) {
        width = img.naturalWidth;
        height = img.naturalHeight;

        updateDetail();
    } else {
        //Using an Image Object
        img = new Image();
        img.onload = function() {
            width = this.width;
            height = this.height;

            updateDetail();
        };
        img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
    }

}());

Et que mon site est:

http://dhems.x10.mx/

Mais sur mon site ne fonctionne pas montrer la largeur et la hauteur de l'image

Pourquoi?!?!

OriginalL'auteur user2491036 | 2013-06-22

Mettre votre code dans

window.onload = function() {
 //insert code here
}

Votre fichier js est exécuté avant que le moteur atteindre l'image..Vous obtenez à la suite d'erreur de la console:

Uncaught TypeError: Cannot read property 'width' of null

C'est aussi une bonne pratique pour mettre tous les fichiers de scripts à la fin de la page et tous les fichiers css dans le commencer. Il permettra d'augmenter le temps de chargement de votre page, car si JS fichiers sont dans le commencer, votre navigateur ne démarre pas rendu jusqu'à ce que ces fichiers sont téléchargés.

votre code devrait ressembler à:

window.onload = function() {

var img = document.getElementById('my_image');

//Original
var width, height;

//Display
var d_width = img.width;
var d_height = img.height;

var updateDetail = function() {
    document
        .getElementById('display_size')
        .innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;

    document
        .getElementById('native_size')
        .innerHTML = 'Original Size: ' + width + ' x ' + height;
};

//Using naturalWidth/Height
if (img.naturalWidth) {
    width = img.naturalWidth;
    height = img.naturalHeight;

    updateDetail();
} else {
    //Using an Image Object
    img = new Image();
    img.onload = function() {
        width = this.width;
        height = this.height;

        updateDetail();
    };
    img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}

}

sur le file.js droit? J'ai mis, mais rien encore.
oui, il suffit de mettre votre code dans la fenêtre.onload = function () { code ici }
l'homme! vous êtes les meilleurs!!! merci beaucoup!
Vous êtes les bienvenus. Par la façon d'envisager le marquage de la meilleure des réponses comme réponse, de sorte que les autres personnes ne seront pas d'entrer ici sans raison.

OriginalL'auteur Deepsy

0

Déplacer la balise de script après l'image dans le HTML. Le Script est exécuté avant que l'image va dans la page.

Avez-vous regardé le script? window.onload = function() {
var img = document.getElementById('my_image'); n'est pas dans le onload
C'est sur son site. dhems.x10.mx/home.js
ouais, c'est maintenant
merci à toi aussi! - Je le faire 😀

OriginalL'auteur Jan Tojnar
0

Mettre le code en bas de votre <body> dans un <script type='text/javascript'> ou de l'utilisation window.onload. Si vous avez d'autres choses chargement onload la première option est votre meilleur choix, sinon utilisez ce code:
```
<script type='text/javascript'>
  (function(){
    var pre = window.onload;
    onload = function(){
      if(pre)pre();
      //other code here
    }
  })();
</script>
```
Cet exemple peut être utilisé dans votre <head>.

Merci pour la réponse! mais je voulais le code sur .js fichier à I apprendre 😀

OriginalL'auteur StackSlave

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
function readImage(file) {
var reader = new FileReader();
var image  = new Image();
reader.readAsDataURL(file);  
reader.onload = function(_file) {
image.src    = _file.target.result;              //url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type,                           //ext only: //file.type.split('/')[1],
n = file.name,
s = ~~(file.size/1024) +'KB';
$('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
};
image.onerror= function() {
alert('Invalid file type: '+ file.type);
};      
};
}
$("#choose").change(function (e) {
if(this.disabled) return alert('File upload not supported!');
var F = this.files;
if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
</script>
<meta charset=utf-8 />
<title>Multiple image upload with preview by Roko C.B.</title>
</head>
<body>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>

OriginalL'auteur Devendra Rathore

Vous devez vous connecter pour publier un commentaire.