選択した画像の寸法を確認し、範囲外であれば警告する

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はのためのループ内でチェックを使用することはできません、それはコールバック
（あなたは非同期を使用していない限り、/待つか、発電機+収率）

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>