javascript - 是否可以在上传之前检查图像的尺寸？

Question

我有一个用于将图像上传到服务器的上传控件，但在上传之前我只想确保图像的尺寸是否正确。客户端有什么可以用 JavaScript 完成的吗？

Answer 1

您可以在提交表单之前检查它们：

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

});

这仅适用于现代浏览器，因此您仍然需要检查服务器端的尺寸。您也不能信任客户端，因此这是您必须在服务器端检查它们的另一个原因。

Answer 2

是的，HTML5 API 支持这一点。

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


    }

});​

演示（在 chrome 上测试）

Answer 3

可能有点晚了，但这是使用承诺的接受答案的现代 ES6 版本

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

你会这样称呼它

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

Answer 4

为简单起见，请使用 javascript 图像处理框架，如fabric.js、processing.js和MarvinJ。

在MarvinJ的情况下，只需在客户端加载图像并使用方法getWidth()和getHeight()来检查图像的尺寸。拥有这些维度，您可以允许文件提交或通知用户有关不兼容的维度。

例子：

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>

Answer 5

如果您不需要处理 svg 文件并且可以限制自己使用最新的浏览器，那么您可以使用该createImageBitmap功能来制作基于 Promise 的单行：

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

Answer 6

@Klemen Tusar对多个文件的分析器的扩展：

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

Answer 7

试一试。我过去用过这个。 https://github.com/valums/file-uploader