Is het mogelijk om de afmetingen van beeld te controleren vóór uploading?

Ik heb een uploadbesturing voor het uploaden van de afbeeldingen naar de server, maar voordat u het uploadt, wil ik gewoon zeker weten of de afbeeldingen van de juiste afmetingen zijn.
Is er iets aan de klantzijde die kan worden gedaan met JavaScript?

Antwoord 1, Autoriteit 100%

U kunt ze controleren voordat u het formulier indient:

window.URL = window.URL || window.webkitURL;
$("form").submit( function( e ) {
    var form = this;
    e.preventDefault(); //Stop the submit for now
                                //Replace with your selector to find the file input in your form
    var fileInput = $(this).find("input[type=file]")[0],
        file = fileInput.files && fileInput.files[0];
    if( file ) {
        var img = new Image();
        img.src = window.URL.createObjectURL( file );
        img.onload = function() {
            var width = img.naturalWidth,
                height = img.naturalHeight;
            window.URL.revokeObjectURL( img.src );
            if( width == 400 && height == 300 ) {
                form.submit();
            }
            else {
                //fail
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }
});

Dit werkt alleen aan moderne browsers, zodat u nog steeds de dimensies aan de serverzijde moet controleren. Je kunt ook niet vertrouwen
de klant, dus dat is een andere reden dat u ze hoe dan ook wilt controleren.

Antwoord 2, Autoriteit 64%

Ja, HTML5 API ondersteunt dit.

http://www.w3.org/tr/fileapi/

var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
    var image, file;
    if ((file = this.files[0])) {
        image = new Image();
        image.onload = function() {
            alert("The image width is " +this.width + " and image height is " + this.height);
        };
        image.src = _URL.createObjectURL(file);
    }
});​

Demo (getest op chrome)

Antwoord 3, Autoriteit 3%

is misschien een beetje laat, maar hier is een moderne ES6-versie van het geaccepteerde antwoord met behulp van beloftes

const getUploadedFileDimensions: file => new Promise((resolve, reject) => {
    try {
        let img = new Image()
        img.onload = () => {
            const width  = img.naturalWidth,
                  height = img.naturalHeight
            window.URL.revokeObjectURL(img.src)
            return resolve({width, height})
        }
        img.src = window.URL.createObjectURL(file)
    } catch (exception) {
        return reject(exception)
    }
})

je zou het zo noemen

getUploadedFileDimensions(file).then(({width, height}) => {
    console.log(width, height)
})

Antwoord 4

Gebruik het eenvoudig een JavaScript-beeldverwerkingskader zoals weefsel.js , verwerking.js en marvinj .

In het geval van Marvinj , laadt eenvoudig de afbeelding in de clientzijde en gebruikt u de methoden Getwidth () en Gethight () om de afmetingen van de afbeelding te controleren. Met de dimensies kunt u de bestandsinzending toestaan ​​of de gebruiker informeren over de incompatibele dimensie.

Voorbeeld:

var image = new MarvinImage();
image.load("https://i.imgur.com/oOZmCas.jpg", imageLoaded);
function imageLoaded(){
  document.getElementById("result").innerHTML += image.getWidth()+","+image.getHeight();
}

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<div id="result"></div>

if(typeof createImageBitmap !== "function") {
  console.error("Your browser doesn't support this method");
  // fallback to URL.createObjectURL + <img>
}
inp.oninput = e => {
  createImageBitmap(inp.files[0])
    .then((bmp) => console.log(bmp.width, bmp.height))
    .catch(console.error);
}

<input type="file" id="inp" accept="image/*">

const loadImage = file => new Promise((resolve, reject) => {
    try {
        const image = new Image();
        image.onload = function () {
            resolve(this)
        };
        image.onerror = function () {
            reject("Invalid image. Please select an image file.");
        }
        image.src = window.URL.createObjectURL(file);
    } catch (e) {
        reject(e)
    }
})
const loadImagesArray = async files => {
    let images = Array(files.length)
    await Promise.all(files.map((file, i) => (async () => {
        const loadedImage = await loadImage(file)
        images[i] = loadedImage
    })()))
    return images
}

const loadedImages = await loadImagesArray(e.currentTarget.files)
for(const loadedImage of loadedImages) {
    console.log(loadedImage.width, loadedImage.height)
}