Nom Pardéfaut Nom Pardéfaut - 1 year ago 75
Javascript Question

Get image width after an upload Javascript [works on firefox but not chrome]

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;
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];
// 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);

Answer Source
imageatraiter.onload = function(){console.log("I've been updated, you can do your fancy things with my new width and height")}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download