Question

所以我在下面有这两个按钮。一个用于添加图像并在其上方使用另一个图像查看图像。另一个按钮检查图像的分辨率。我想只有一个按钮可以预先创建这两个功能，但在上传图像时似乎无法读取图像分辨率检查功能。

我似乎无法解决的另一件事是，当上传一些肖像图像时，它们是水平显示而不是垂直显示？

在寻求任何帮助之前，我一直试图在最近几天解决这些问题，但它已经达到了我无法想到任何其他可能有用的地步......

（非常感谢任何帮助！）

第一个按钮代码：

HTML：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <br>
    <img id="blah" src="" alt="Upload Image" />

     <img id="blah2" src="" alt="Upload Image" />

     <img id="grooved" src="http://vignette1.wikia.nocookie.net/elderscrolls/images/e/ec/Ok-icon.png/revision/latest?cb=20120124042116" alt="your image" height="100" />
</form>

使用Javascript：

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });

    function readURL2(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah2').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL2(this);
    });

的CSS：

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);

    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
    background-color: #555;
}

#blah {
 width:500px; 
  height:500px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
}

#blah2 {
 width:500px; 
  height:500px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
  position: absolute;
}

#grooved {
  position: absolute; left: 280px;
}

第二个按钮：

HTML：

<form id="form" action="destination.html">
    <input type="file" id="filePicker" />
    <br/>
    <div id="noFileError" style="display:none;">
        <b>Please select a valid image file.</b>
    </div>
    <input type="submit" value="Submit" />
    <br/>
    <div id="imageValidationError" style="display:none;">
        <b>The image resolution is too low.</b>
    </div>
</form>

使用Javascript：

var _URL = window.URL || window.webkitURL;

function isSupportedBrowser() {
    return window.File && window.FileReader && window.FileList && window.Image;
}

function getSelectedFile() {
    var fileInput = document.getElementById("filePicker");
    var fileIsSelected = fileInput && fileInput.files && fileInput.files[0];
    if (fileIsSelected)
        return fileInput.files[0];
    else
        return false;
}

function isGoodImage(file) {
    var deferred = jQuery.Deferred();
    var image = new Image();

    image.onload = function() {
        // Check if image is bad/invalid
        if (this.width + this.height === 0) {
            this.onerror();
            return;
        }

        // Check the image resolution
        if (this.width >= 1191 && this.height >= 1191) {
            deferred.resolve(true);
        } else {
            $("#imageValidationError").show();
            deferred.resolve(false);
        }
    };

    image.onerror = function() {
        $("#noFileError").show();
        deferred.resolve(false);
    }

    image.src = _URL.createObjectURL(file);

    return deferred.promise();
}


$("#form").submit(function(event) {
    var form = this;

    if (isSupportedBrowser()) {
        event.preventDefault(); //Stop the submit for now

        var file = getSelectedFile();
        if (!file) {
            $("#noFileError").show();
            return;
        }

        isGoodImage(file).then(function(isGood) {
            if (isGood)
                form.submit();
        });
    }
});

Answer 1

您可以在readUrl（）函数中调用isGoodImage：

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
            //Add this line, it will check the resoation and display if the image is bad
            isGoodImage(input.files[0]);
        }
    }

它以这种方式工作。小提琴 - https://jsfiddle.net/t2x7zbhs/2/

关于正在上传的肖像图像，您需要检查＆＃34; EXIF信息中的方向＆＃34;是正确的。它有时会被不同的图形编辑打破。你可以在线使用这个＆＃34; Exif Viewer＆＃34; http://regex.info/exif.cgi

如何关闭这两个按钮，如果关闭则旋转（假设我已正确完成）

1 个答案: