Как проверить ширину и высоту изображения в административном классе Django? - PullRequest
Новая
       40

Как проверить ширину и высоту изображения в административном классе Django?

1 голос
/ 30 марта 2019

Я зарегистрировал класс, как показано ниже, чтобы иметь панель администратора для загрузки изображений: 

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')

На данный момент, когда я вхожу в раздел администратора, я могу загрузить изображение прямо на сервер. Но я хочу проверить соотношение перед загрузкой изображения.

Вопрос как и когда мне проверять ширину и высоту изображения перед его загрузкой?

Ответы [ 2 ]

1 голос
/ 30 марта 2019

Если вы хотите проверить размеры до , вы загружаете его в свой бэкэнд 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 на этот ответ

1 голос
/ 30 марта 2019

Вы можете создать собственную форму и иметь чистый метод для проверки ширины и высоты изображения 

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


class BannerForm(forms.ModelForm):
    def clean_image(self):
        image = self.cleaned_data['image']
        #image.height, image.width
        return image
...