1

Hello I am trying to get an image width after an upload using javascript, I also need to calculate the ratio between the previous width and the new one because of the css. "imageatraiter" is the image. I wrote this code :

function taille_image(){
    var largeurImage = document.getElementById("imageatraiter").width;
    var sheet = window.document.styleSheets[1];
    sheet.insertRule('@media (min-width: 768px) {  .imageatraiter {    width: 750px;  }}', sheet.cssRules.length);
    sheet.insertRule('@media (min-width: 992px) {  .imageatraiter {    width: 970px;  }}', sheet.cssRules.length);
    sheet.insertRule('@media (min-width: 1200px) {  .imageatraiter {    width: 1170px;  }}', sheet.cssRules.length);
    var coeff = largeurImage/document.getElementById("imageatraiter").width;
    console.log(largeurImage);
    console.log(coeff);
    return coeff;
}

It works almost on firefox, ( I need to refresh the first time) but on google chrome the width seems to be the previous 's one.

If you have any questioned feel free to ask, and I hope someone will help me thx.

Edit : The upload as asks in comments

$('#input-700').on('fileuploaded', function(event, data, previewId, index) {
    //filename = replaceAll(data.files[index]['name'], '_', '-');
    filename = data.files[index]['name'];
    filename = filename.substr(0, filename.lastIndexOf('.'));//on enlève l'extension qui est apres le dernier '.'
    path = 'uploads/'+filename+'.jpg';
    $('#'+previewId).children().attr("src",path);//on charge l'image jpg en preview
    $("#imageatraiter").attr("src",path);//on charge l'image jpg pour le traitement

   // enable();//on enlève toutes les classes "disabled" pour pouvoir appliquer des opérations à l'image
    var sheet = window.document.styleSheets[1];
    sheet.deleteRule(sheet.cssRules.length-1);
    sheet.deleteRule(sheet.cssRules.length-1);
    sheet.deleteRule(sheet.cssRules.length-1);
   // var largeurImage = "<?= $_SESSION['width'] ?>";
    coeffImage = taille_image();// On reapplique les tailles jolies en css pour l'image et on calcul le coefficient
   // console.log(largeurImage);
});
ElChapo
  • 228
  • 3
  • 13
  • 1
    you need to wait for the on load event of the images – stalin Dec 18 '15 at 17:57
  • could you precise how to do it ? – ElChapo Dec 18 '15 at 18:32
  • `imageatraiter.onload = function(){console.log("I've been updated, you can do your fancy things with my new width and height")}`If you do update more than once, attaching only once this event handler is enough for the function attached to be called every time. – Kaiido Dec 19 '15 at 10:21
  • Seems to work this far, can't believe something this simple works because I tested all the answer on : http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome?rq=1 , and none of them worked for me ! – ElChapo Dec 19 '15 at 10:58

2 Answers2

0

As per Stalins comment, you need to wrap your function call in a window.onload event. You can add the below code directly to your html or in your .js file. (Jsut remove the script tags).

<script>
    window.onload = function() {
        taille_image()
    };
</script>

Here are the window.onload docs

Rastalamm
  • 1,712
  • 3
  • 23
  • 32
  • 1
    Hard to say for sure since the question isn't completely clear, but I think the OP needs to wait for the second image to be loaded, not for the window to be loaded. – Stephen Thomas Dec 18 '15 at 21:46
  • @StephenThomas - I think you're right. OP - Maybe put a callback in the upload function? Can you share the code that does the upload? (if you're sending the image via ajax you can put your function call in the .success of the ajax call callback. – Rastalamm Dec 18 '15 at 23:43
  • I am not sure about windows.load as only the image is reloaded. Excuse me Rastalamm what is a callback ? I am editing the question for you to see the upload – ElChapo Dec 19 '15 at 09:14
0

The problem seems to be that on webkit browser such as chrome or opera, the css and the javascript is loading pretty much simultaneously. That is explaining why sometimes it doesn't work and after a few refreshs it works again.

The solution is to wait that this image is fully loaded and then apply some css.

imageatraiter.onload = function(){console.log("I've been updated, you can do your fancy things with my new width and height")}
ElChapo
  • 228
  • 3
  • 13