檢查選定的圖像尺寸和警告，如果超出範圍

Question

我有一個功能，顯示選定的圖像以及圖像的寬度和高度。如果圖像尺寸大於390x390，我想進行檢查以提醒。我已經標記了我認爲尺寸檢查應該去的地方，我可能是錯的。但它不管用。

如果有人有時間，他們請看看我應該如何進行大小檢查。

非常感謝您的時間。

我的腳本：

window.URL = window.URL || window.webkitURL; 
var elBrowse = document.getElementById("image_field"), 
elPreview = document.getElementById("preview2"), 
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL 

function readImage (file) { 
    var reader = new FileReader(); 
    reader.addEventListener("load", function() { 
    var image = new Image(); 
    image.addEventListener("load", function() { 
     var imageInfo = '<br><br>Your selected file size is<br> Display width ' + 
     image.width + ', Display height ' + 
     image.height + ' ' + ''; 


     elPreview.appendChild(this); 
     elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>'); 
    }); 
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result; 
    if (useBlob) { 
     window.URL.revokeObjectURL(file); 
    } 
    }); 
    reader.readAsDataURL(file); 
} 

elBrowse.addEventListener("change", function() { 
    var files = this.files; 
    var errors = ""; 
    if (!files) { 
    errors += "File upload not supported by your browser."; 
    } 
    if (files && files[0]) { 
    for(var i=0; i<files.length; i++) { 
     var file = files[i]; 
     if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) { 
     readImage(file); 
     } else { 
     errors += file.name +" Unsupported Image extension\n"; 
     } 

     // SOMETHING LIKE THIS 
     if((image.width < 390 && image.height < 390) .test(file.name)) { 

     readImage(file); 
     } else { 
     errors += file.name +" Selected image is to small\n"; 
     } 
     // END 
    } 
    } 
    if (errors) { 
    alert(errors); 
    } 
}); 

Answer 1

所以你需要檢查移到事件偵聽器，因爲這是在那裏你可以知道圖像分辨率 這裏你沒有錯誤列表的第一位，所以你需要但稍作修改，但你可以從這裏開始：

window.URL = window.URL || window.webkitURL; 
var elBrowse = document.getElementById("image_field"), 
elPreview = document.getElementById("preview2"), 
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL 

function readImage (file) { 

    var reader = new FileReader(); 
    reader.addEventListener("load", function() { 
    var image = new Image(); 

    image.addEventListener("load", function() { 
     if(image.width <= 390 && image.height <= 390) 
     { 
     var imageInfo = '<br><br>Your selected file size is<br> Display width ' + 
     image.width + ', Display height ' + 
     image.height + ' ' + ''; 


     elPreview.appendChild(this); 
     elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>'); 
     } else { 
      alert (file.name +" Selected image is to big\n"); 
     } 
    }); 
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result; 
    if (useBlob) { 
     window.URL.revokeObjectURL(file); 
    } 
    }); 
    reader.readAsDataURL(file); 
} 

elPreview.addEventListener("change", function() { 
var files = this.files; 
var errors = ""; 
if (!files) { 
    errors += "File upload not supported by your browser."; 
} 
if (files && files[0]) { 
    for(var i=0; i<files.length; i++) { 
    var file = files[i]; 
    if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) { 

     readImage(file); 

    } else { 
    errors += file.name +" Unsupported Image extension\n"; 
    } 

    } 
} 
if (errors) { 
alert(errors); 
} 
}); 

的文件變量（你的目的是檢查尺寸放在首位，你只能對文件大小爲基礎的條件 - 以字節爲單位）

Answer 2

我不知道如果我的理解這個問題，但你的意思是這樣？

elBrowse.addEventListener("change", function() { 
var files = this.files; 
var errors = ""; 
if (!files) { 
    errors += "File upload not supported by your browser."; 
} 
if (files && files[0]) { 
    for(var i=0; i<files.length; i++) { 
    var file = files[i]; 
    if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) { 
    if(image.width <= 390 && image.height <= 390) 
    { 
     readImage(file); 
    } else { 
     errors += file.name +" Selected image is to big\n"; 
    } 
    } else { 
    errors += file.name +" Unsupported Image extension\n"; 
    } 

    } 
} 
if (errors) { 
alert(errors); 
} 
}); 

Answer 3

加載圖像和獲取維度是異步的，所以y OU不能使用支票裏面的for循環，它有回調
（除非您使用異步/等待或發電機+產量）

var elBrowse = document.getElementById('image_field') 
 
var elPreview = document.getElementById('preview2') 
 

 
// No point in addthing the listener if we can't read them anyway 
 
if ('files' in elBrowse) { 
 
    // No need for addEventListener if you only going to have 1 listener 
 
    elBrowse.onchange =() => { 
 
    for (let file of elBrowse.files) { 
 
     file.image().then(image => { 
 
     
 
     // Now if you don't like the extension you can always transform it 
 
     // using the canvas element... 
 

 
     if (image.width < 390 && image.height < 390) 
 
      return console.error(file.name + ' is to small\n') 
 

 
     let info = `<br><br>${file.name} size is ${file.size} bytes 
 
     and dimension is ${image.width}x${image.height}<br>` 
 

 
     elPreview.appendChild(image) 
 
     elPreview.insertAdjacentHTML('beforeend', info) 
 

 
     }, err => { 
 
     console.error(file.name + " Isn't an image") 
 
     }) 
 
    } 
 
    } 
 
} else { 
 
    console.info('reading the file is not possible, use flash alternetive?') 
 
}

<!-- 
 
Getting a bit of help from Screw-FileReader 
 
ref: https://github.com/jimmywarting/Screw-FileReader 
 
--> 
 
<script src="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script> 
 

 
<!-- 
 
use the accept attribute to say that you only want images 
 
So you don't have to check for it in your code 
 
But for just in case we listen for image.onerror when we load the image 
 
--> 
 
<input id=image_field type=file multiple accept="image/*"> 
 

 
<div id=preview2>