Is it possible to check dimensions of image before uploading?

问题

I have an upload control for uploading the images to the server, but before uploading I just want to make sure if the images are of correct dimensions. Is there anything on client side that can be done with javascript?

回答1:

You could check them before submitting form:

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

});

This only works on modern browsers so you still have to check the dimensions on server side. You also can't trust the client so that's another reason you must check them server side anyway.

回答2:

Yes, HTML5 API supports this.

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 (tested on chrome)

回答3:

To make things simple, use a javascript image processing framework like fabric.js, processing.js and MarvinJ.

In the case of MarvinJ, simply loads the image in the client side and use the methods getWidth() and getHeight() to check the image's dimensions. Having the dimensions you can allow the file submission or notify the user about the incompatible dimension.

Example:

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>

回答4:

Might be a bit late but here's a modern ES6 version of the accepted answer using promises

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)
    }
})

You'd call it like this

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

回答5:

If you don't need to handle svg files and can limit yourself to newest browsers, then you can use the createImageBitmap function to make a Promise based one liner:

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/*">

回答6:

Give this a shot. I've used this in the past. https://github.com/valums/file-uploader

来源：https://stackoverflow.com/questions/13572129/is-it-possible-to-check-dimensions-of-image-before-uploading

标签

javascript

jquery

file-upload

client-side