客户端图像分辨率/大小验证 [英] Client-side image resolution/size validation

问题描述

我正在为一家印刷公司设计一个网站。他们想要一个图像尺寸/分辨率检查器，让他们的客户上传他们想要打印的图像，并告诉他们图像分辨率是否足以打印。

I'm designing a website for a printing company. They want an image size/resolution checker that will let their customers upload an image they want to print, and tell them if the image resolution is good enough for printing.

I我正在使用Adobe Muse，因此我需要一个简单的HTML和CSS解决方案，而不需要任何服务器端要求。

I'm using Adobe Muse, so I need a simple HTML and CSS solution to this without any server-side requirements.

这是我到目前为止所基于的< a href =https://stackoverflow.com/questions/13572129/is-it-possible-to-check-dimensions-of-image-before-uploading>这个问题：

This is what I have so far, based on this question:

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 { 
                //stop
            } 
        }; 
    } else {
        //No file was input or browser doesn't support client side reading
        form.submit();
    }
});

但是，我没有收到任何弹出消息。我做错了什么？

However, I don't get any popup message. What am I doing wrong?

推荐答案

您的代码包含许多错误，这就是它无法正常工作的原因。 （我不认为 submit 事件甚至被绑定到表单，因为你的jQuery选择器看起来不正确：它应该是＃ form 或 .form ）

Your code contains a number of errors, which is why it isn't working. (I don't think the submit event is even being bound to the form, because your jQuery selector doesn't look right: it should be #form or .form)

这是一个有效的解决方案：

Here's a working solution:

HTML

<form id="form" action="destination.html">
    <input type="file" id="filePicker" />
    <br/>
    <input type="submit" value="Submit" />
</form>

JS

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 >= 400 && this.height >= 400) {
            deferred.resolve(true);
        } else {
            alert("The image resolution is too low.");
            deferred.resolve(false);
        }
    };

    image.onerror = function() {
        alert("Invalid image. Please select an image file.");
        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) {
            alert("Please select an image file.");
            return;
        }

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

---

isSupportedBrowser（）在尝试检查图像之前确保用户的浏览器支持所需的功能。

---

isSupportedBrowser() makes sure that the user's browser supports the required functions before attempting to check the image.

getSelectedFile（）确保用户选择了一个文件，然后将文件数据传回。

getSelectedFile() makes sure the user has picked a file, and then passes the file data back.

isGoodImage（）获取文件数据并尝试从中构造图像元素。如果触发 onerror ，则它不是图像或文件已损坏。如果触发 onload ，它会进行完整性检查以确保图像具有有效尺寸，然后验证分辨率是否高于400x400。

isGoodImage() takes the file data and attempts to construct an image element from it. If onerror is fired, it's not an image or is a corrupted file. If onload is fired, it does a sanity check to make sure the image has valid dimensions, and then validates that the resolution is above 400x400.

由于 onerror 和 onload 事件是异步触发的，该函数需要传回一个promise表示验证结果。

Since onerror and onload events are fired asynchronously, the function needs to pass back a promise indicating the result of the validation.

最后，表单上的 submit 处理程序将所有这些方法调用绑定在一起，只有在分辨率检查恢复良好时才允许表单提交。

Finally, the submit handler on the form ties all these method calls together and only allows the form to submit if the resolution check comes back good.

链接到小提琴： http://jsfiddle.net/uwj85m7d/7/

编辑根据要求，显示 div 的变体，其中包含错误消息而不是警告弹出窗口： http://jsfiddle.net/uwj85m7d/8/

Edit As requested, a variant that shows divs containing error messages instead of alert popups: http://jsfiddle.net/uwj85m7d/8/

进一步阅读：

• 上传之前是否可以检查图像尺寸？（很好找！ ）


• 从文件输入中获取数据JQuery


• HTMLImageElement


• image.onError事件永远不会触发，但图像不是有效数据 - 需要解决方法

• Is it possible to check dimensions of image before uploading? (good find!)
• Get data from file input in JQuery
• HTMLImageElement
• image.onError event never fires, but image isn't valid data - need a work around

这篇关于客户端图像分辨率/大小验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！