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

【问题标题】：Get image width after an upload Javascript [works on firefox but not chrome]上传 Javascript 后获取图像宽度 [适用于 Firefox 但不适用于 chrome]
【发布时间】：2015-12-18 17:55:32
【问题描述】：

您好，我正在尝试使用 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 上，宽度似乎是以前的。

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

编辑：在 cmets 中按要求上传

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

【问题讨论】：

你需要等待图片的加载事件
你能详细说明一下怎么做吗？
imageatraiter.onload = function(){console.log("I've been updated, you can do your fancy things with my new width and height")}如果您确实更新了多次，则仅附加一次此事件处理程序就足以让附加的函数每次都被调用。
似乎工作到此为止，不敢相信这么简单的事情，因为我在stackoverflow.com/questions/318630/… 上测试了所有答案，但没有一个对我有用！

标签： javascript jquery css google-chrome jquery-file-upload

【解决方案1】：

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

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

Here are the window.onload docs

【讨论】：

很难确定，因为问题并不完全清楚，但我认为 OP 需要等待加载第二张图像，而不是加载窗口。
@StephenThomas - 我认为你是对的。 OP - 也许在上传函数中放一个回调？你能分享上传的代码吗？（如果您通过 ajax 发送图像，您可以将函数调用放在 ajax 调用回调的 .success 中。
我不确定 windows.load 因为只有图像被重新加载。请问 Rastalamm 什么是回调？我正在编辑问题以供您查看上传

【解决方案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")}

【讨论】：

请添加更多详细信息如何解决问题。