fineuploader-读取文件尺寸/通过分辨率验证 [英] fineuploader - Read file dimensions / Validate by resolution

问题描述

我想通过文件尺寸(分辨率)进行验证.

I would like to validate by file dimensions (resolution).

在文档页面上，只有有关文件名和大小的信息，所有有关尺寸的文档，而我在Google上也没有运气.

on the documentation page there is only information regarding file name and size, nothing at all in the docs about dimensions, and I also had no luck on Google.

这样做的目的是我不希望用户将低分辨率照片上传到我的服务器.谢谢.

The purpose of this is that I don't want users to upload low-res photos to my server. Thanks.

推荐答案

按照 Ray Nicholus 的建议，使用getFile方法获取File对象，然后将其与内部实例对象一起使用qq.ImageValidation在文件上运行fineuploader的验证.必须返回承诺，因为此过程是 async .

As Ray Nicholus had suggested, using the getFile method to get the File object and then use that with the internal instance object qq.ImageValidation to run fineuploader's validation on the file. A promise must be return because this proccess is async.

function onSubmit(e, id, filename){
    var promise = validateByDimensions(id, [1024, 600]);
    return promise;
}

function validateByDimensions(id, dimensionsArr){
    var deferred = new $.Deferred(),
        file = uploaderElm.fineUploader('getFile', id),
        imageValidator = new qq.ImageValidation(file, function(){}),
        result = imageValidator.validate({
            minWidth  : dimensionsArr[0],
            minHeight : dimensionsArr[1]
        });

    result.done(function(status){
        if( status )
            deferred.reject();
        else
            deferred.resolve();
    });

    return deferred.promise();
}

---

---

现在，我想知道如何显示被拒绝的图像的缩略图，而不将其上传到服务器时，UI可以将其他颜色标记为无效图像"，但是用户可以看到哪些图像是我们有效的，哪些不是...

Now I wonder how to show the thumbnail of the image that was rejected, while not uploading it to the server, the UI could mark in a different color as an "invalid image", yet the user could see which images we valid and which weren't...

虽然我看不到如何将缩略图的默认行为添加到上传器中，但是没有上传，但是有一种手动生成缩略图的方法，如下所示:

While I do not see how I could have the default behavior of a thumbnail added to the uploader, but not being uploaded, but there is a way to generate thumbnail manually, like so:

var img = new Image();
uploaderElm.fineUploader("drawThumbnail", id, img, 200, false);

但是我将创建一个要插入到qq-upload-list中的项目，然后自己处理..但是仍然不难.

but then I'll to create an item to be inserted to qq-upload-list myself, and handle it all myself..but still it's not so hard.

您将必须(当前)编辑qq.ImageValidation函数以在私有函数getWidthHeight之外公开.只需将函数减速度更改为:

You will have to edit (currently) the qq.ImageValidation function to expose outside the private function getWidthHeight. just change that function deceleration to:

this.getWidthHeight = function(){

此外，最好将this.validate函数更改为:

Also, it would be even better to change the this.validate function to:

this.validate = function(limits) {
        var validationEffort = new qq.Promise();

        log("Attempting to validate image.");

        if (hasNonZeroLimits(limits)) {
            this.getWidthHeight().done(function(dimensions){
                var failingLimit = getFailingLimit(limits, dimensions);

                if (failingLimit) {
                    validationEffort.failure({ fail:failingLimit, dimensions:dimensions });
                }
                else {
                    validationEffort.success({ dimensions:dimensions });
                }
            }, validationEffort.success);
        }
        else {
            validationEffort.success();
        }

        return validationEffort;
    };

因此您将获得失败原因以及尺寸.总是拥有更好的控制权.

So you would get the fail reason, as well as the dimensions. always nice to have more control.

现在，我们可以这样编写自定义验证:

Now, we could write the custom validation like this:

function validateFileDimensions(dimensionsLimits){
    var deferred = new $.Deferred(),
        file = this.holderElm.fineUploader('getFile', id),
        imageValidator = new qq.ImageValidation(file, function(){});

    imageValidator.getWidthHeight().done(function(dimensions){
        var minWidth = dimensions.width > dimensionsLimits.width,
            minHeight = dimensions.height > dimensionsLimits.height;

        // if min-width or min-height satisfied the limits, then approve the image
        if( minWidth || minHeight )
            deferred.resolve();
        else
            deferred.reject();

    });

    return deferred.promise();
}

此方法提供了更大的灵活性.例如，您希望对肖像图像进行的验证与对风景图像进行的验证不同，可以轻松地确定图像的方向并运行自己的自定义代码以执行任何操作.

This approach gives much more flexibility. For example, you would want to have different validation for portrait images than landscape ones, you could easily identify the image orientation and run your own custom code to do whatever.

这篇关于fineuploader-读取文件尺寸/通过分辨率验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！