Skip to main content

Image cropping plugin, can be directly applied to django admin.

Project description

一、简介

上传图片时,不同的场景,对图片的宽高有着不同的需求,而django自带的控件ImageField,无法对图片进行裁剪处理,导致上传的图片可能不符合需求。为此,我开发了一个拥有图片、裁剪上传功能的django控件ImageCropField

ImageCropField继承了ImageField的同时,集成了图片裁剪插件cropper.js。你仅需进行简单的配置,就可以非常方便的将ImageCropField与ModelForm、admin进行搭配使用。

二、安装

  1. 环境配置

    名称 要求版本 建议版本
    python ≥ 3.6 3.9
    django ≥ 3.0.0 4.2.13
  2. 使用以下命令安装django-image-crop

    pip install django-image-crop
    
  3. 安装依赖库pillow(图形处理库)

    pip install pillow
    

三、配置

  • 在配置文件setting.py中引入image-crop

    # setting.py
    
    INSTALLED_APPS = [
        ...
        'image_crop'
    ]
    
  • 配置media路径与路由

    # setting.py
    
    MEDIA_URL = "/media/"
    MEDIA_ROOT = BASE_DIR / "media"
    
    # urls.py
    
    from django.conf import settings
    from django.urls import re_path
    from django.views.static import serve
    
    urlpatterns = [
        ...
        re_path(r'media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT})
    ]
    

四、使用

  1. 应用到django admin当中

    # app/model.py
    
    from django.db import models
    from image_crop import ImageCropField
    
    
    class ImageCrop(models.Model):
        image = ImageCropField(blank=True, upload_to="images", verbose_name='上传图片')
        
        class Meta:
            verbose_name = "图片列表"
            verbose_name_plural = verbose_name
    
    # app/admin.py
    
    from django.contrib import admin
    from .models import ImageCrop
    
    
    @admin.register(ImageCrop)
    class ImageCropModelAdmin(admin.ModelAdmin):
        list_display = ["id", "image"]
    
  2. 应用到ModelForm

    # app/forms.py
    
    from django import forms
    from .models import ImageCrop
    
    
    class ImageCropModelForm(forms.ModelForm):
        class Meta:
            model = ImageCrop
            fields = "__all__"
    
    # app/views.py
    
    from django.shortcuts import render
    from .forms import ImageCropModelForm
    
    
    def test(request):
        objs = ImageCropModelForm()
    
        if request.method == "POST":
            print(request.FILES)
            form = ImageCropModelForm(request.POST, request.FILES)
            if form.is_valid():
                form.save()
    
        return render(request, "ImageCrop.html", {"objs": objs})
    
    <!-- app/templates/ImageCrop.html -->
    
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>ImageCrop</title>
      </head>
      <body>
        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {{ objs.as_div }}
          <div>
            <input type="submit" class="btn btn-success" value="提交">
          </div>
        </form>
      </body>
    </html>
    
    # urls.py
    
    from django.urls import path
    from app import views
    
    urlpatterns = [
    	...
        path("image_crop/", views.test),
    ]
    
  3. ImageCropField内置参数

    • aspect_ratio(裁剪横纵比)

      ImageCropField(blank=True, upload_to="images", verbose_name='上传图片',
      				   aspect_ratio=[(1, 1), (2, 1)])
      
    • max_size(裁剪大小限制)

      ImageCropField(blank=True, upload_to="images", verbose_name='上传图片',
      					   aspect_ratio=[(1, 1), (2, 1)], max_size=2000)
      
  4. 图片格式的选择 ImageCropField提供了JPG、PNG两种图片格式的选择。若选择JPG格式,裁剪超出图片区域的部分会以黑色背景代替;若选择PNG格式,裁剪超出图片区域的部分会以透明背景代替,但裁剪出图片大小会比原图大出不少,请安需求选择。

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-image-crop-0.0.3.tar.gz (91.7 kB view details)

Uploaded Source

File details

Details for the file django-image-crop-0.0.3.tar.gz.

File metadata

  • Download URL: django-image-crop-0.0.3.tar.gz
  • Upload date:
  • Size: 91.7 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.0 CPython/3.8.10

File hashes

Hashes for django-image-crop-0.0.3.tar.gz
Algorithm Hash digest
SHA256 76172a1196d02c980aa7820554ad057d02e97012f64537e70371fa6403b0cfd5
MD5 892dfd88306d78940e3e86bb5031bfe0
BLAKE2b-256 ba70a103b677334b617a5ec02e2164827e07c95c63d6321667b3fb5cfb5f9298

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page