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上工作，（我需要第一次刷新）但是在谷歌浏览器上，宽度似乎是前一个。

如果您有任何问题可以随意提问，我希望有人会帮助我。

编辑：上传为评论中的

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

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

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

Here are the window.onload docs

Answer 2

问题似乎是在webkit浏览器上，例如chrome或opera，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]

2 个答案: