上传后获取图像宽度 Javascript [适用于 firefox 但不适用于 chrome]

Question

您好，我正在尝试使用 javascript 获取上传后的图像宽度，由于 css，我还需要计算先前宽度与新宽度之间的比率。 "imageatraiter" 是图像。我写了这段代码：

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;
}

在firefox上几乎可以正常工作，（我需要第一次刷新）但是在google chrome上宽度似乎是以前的。

如有任何疑问，请随时提出，希望有人能帮助我。

编辑：按评论要求上传

$('#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);
});

Answer 1

根据斯大林的评论，您需要将函数调用包装在 window.onload 事件中。您可以将以下代码直接添加到 html 或 .js 文件中。（只是删除脚本标签）。

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

Here are the window.onload docs

Answer 2

问题似乎是在 chrome 或 opera 等 webkit 浏览器上，css 和 javascript 几乎同时加载。这就解释了为什么有时它不起作用，并且在几次刷新后它再次起作用。

解决方案是等待此图像完全加载，然后应用一些 css。

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

上传后获取图像宽度 Javascript [适用于 firefox 但不适用于 chrome]

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

javascript

jquery

css

google-chrome

jquery-file-upload