javascript - 如何让这两个按钮成为一个按钮，如果关闭则旋转(假设我已经正确完成)

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

它是这样工作的。 fiddle - https://jsfiddle.net/t2x7zbhs/2/

关于正在上传的人像图片，您需要检查“EXIF 信息”中的方向是否正确。它有时会被不同的图形编辑器破坏。您可以使用此“在线 Exif 查看器”http://regex.info/exif.cgi