如何在Django管理类中检查图像的宽度和高度？

Question

我已经注册了一个类，如下面有一个管理面板上传图像：

android_dashboard.register(Banner, BannerAdmin)

横幅模型如下：

class Banner(models.Model):    
    image = ImageField(
        _('Image'), upload_to=upload_path, blank=True, null=True,
        content_types=['image/jpg', 'image/jpeg', 'image/png'],
        max_size=1 * 1024 * 1024, extensions=['jpg', 'jpeg', 'png']
    )    
    type_of_banner = models.CharField(_('Type of Banner'), max_length=3, default='web')

    class Meta:
        verbose_name = _('Banner')
        verbose_name_plural = _('Banners')

    def __str__(self):
        return '%s' % str(self.id)

模型如下：

class BannerAdmin(admin.ModelAdmin):
    model = Banner
    fields = ('image', 'type_of_banner')
    list_display = ('image', 'type_of_banner')

现在，当我登录到管理部分，我可以上传图像直接到服务器。但是我想在上传图片之前检查一下比率。你知道吗

问题是上传图像之前，我应该如何以及何时检查图像的宽度和高度？你知道吗

Answer 1

如果您想在上传到django后端之前验证维度，我认为您必须使用带有javascript的自定义小部件。你知道吗

像这样的方法可能有用：

class CustomImageInput(widgets.FileInput):

    def __init__(self, max_width, max_height, attrs=None):
        super(CustomImageInput, self).__init__(attrs)
        self.attrs.update({
            'data-max-width': max_width,
            'data-max-height': max_height,
            'class': 'custom-image-widget'
        })

    class Media:
        js = ('custom_image_widget.js',)

custom_image_widget.js将包含如下内容：

window.URL = window.URL || window.webkitURL;

$(document).ready(function() {
    $(".custom-image-widget").change(function(e) {
        var data = $(this).data(),
            maxWidth = data.maxWidth,
            maxHeight = data.maxHeight;

        if ((file = this.files[0])) {
            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 > maxWidth || height > maxHeight ) {
                    // Show error message
                    $(this).val("");
                }
            };
        }
    }
    $(".custom-image-widget").each(function() {
        var data = $(this).data(),
            maxWidth = data.maxWidth,
            maxHeight = data.maxHeight;

    });
});

然后需要将此小部件附加到管理模型ImageField：

class BannerAdminForm(forms.ModelForm):
    class Meta:
        model = Banner
        widgets = {
          'image': CustomImageInput(max_height=400, max_width=300),
        }
        fields = '__all__'

class BannerAdmin(admin.ModelAdmin):
    form = BannerAdminForm

我将javascript基于this answer