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

So I have these two buttons below. One is for adding an image in and viewing it with another image over the top of that. The other button checks he resolution of the image. I would like to only have one button that preforms both those functions but can't seem to get it to read the image resolution check function when you upload an image.

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

The other thing that I can't seem to fix / figure out is when some portrait images are uploaded they're displayed horizontally instead of vertically?

我无法修复/弄清楚的另一件事是,当上传一些肖像图像时,它们是水平显示而不是垂直显示?

Ive been trying to figure these things out for the last few days before asking for any help but its got to the point where I can't think of anything else that may work.....

在寻求任何帮助之前,我一直试图在最后几天弄清楚这些事情,但它已经到了我无法想到任何其他可能有用的地步.....

(Any help is much appreciated!)

(任何帮助深表感谢!)

First Button Code:

第一个按钮代码:

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

Second Button :

第二个按钮:

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

1 个解决方案

#1

You can call the isGoodImage in the readUrl() func:

你可以在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]);
        }
    }

Its works this way. Fiddle-https://jsfiddle.net/t2x7zbhs/2/

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

About the portrait images that are being uploaded, you will need to check the orientation in the "EXIF information" is correct. It can sometimes get broken by different graphic editors. You can use this "Exif Viewer online" http://regex.info/exif.cgi

关于正在上传的肖像图像,您需要检查“EXIF信息”中的方向是否正确。它有时可能被不同的图形编辑打破。您可以使用此“Exif Viewer online”http://regex.info/exif.cgi

#1