在输入栏上限制图像的宽度和高度

Question

是否可以通过使用html，css和javascript / jquery限制图片在输入字段上的宽度和高度？ 我正在尝试限制个人资料照片的上传（需要使照片成为完美的正方形，例如200x200、300x300）

Answer 1

PHP有一个名为getimagesize（）的函数。

list($width, $height, $type, $attr) = getimagesize("img.jpg");

可以在文档中看到： http : //php.net/manual/zh/function.getimagesize.php

因此，只需在提交数据库之前检查高度和宽度

Answer 2

您可以通过从上传的文件创建图像来检查图像宽度的高度。

$("#fileUploadForm").submit(function(e){
var window.URL = window.URL || window.webkitURL;
var fileInput = $(this).find("input[type=file]")[0],
    file = fileInput.files ? fileInput.files[0] : null;

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 == height) {//perfect square
            this.submit();
        }
        else {
            //fail
        }
    };
}
});