跳转到主要内容

一个用于在Django中轻松且无损裁剪图片的可重用应用程序

项目描述

https://img.shields.io/pypi/v/django-image-cropping.svg https://img.shields.io/pypi/pyversions/django-image-cropping.svg PyPI - Django Version Coveralls branch

django-image-cropping是一个应用程序,使用Jcrop通过Django的后台管理界面裁剪上传的图片。

屏幕截图

Screenshot of the cropping

django-image-cropping非常适合您需要模板中特定尺寸的图片,但又希望用户或编辑上传任意尺寸的图片时使用。它提供了一个固定宽高比的选择,这样用户就不能使用奇形怪状的图片破坏布局。

原始图片保持完整,只有在显示时才会裁剪。大图片以小格式呈现,因此即使是非常大的图片也可以轻松裁剪。

提供了必要的字段、小部件和模板标签,用于在模板中显示裁剪后的图片。

也适用于FeinCMS内容类型!

安装

  1. 使用pip安装django-image-cropping

    pip install django-image-cropping

默认情况下,django-image-cropping附带了easy-thumbnails后端,该后端需要安装easy-thumbnails并将其添加到INSTALLED_APPS中。

easy-thumbnails后端需要您调整settings中的缩略图处理器。

INSTALLED_APPS = [
    ...
    'easy_thumbnails',
    'image_cropping',
]

from easy_thumbnails.conf import Settings as thumbnail_settings
THUMBNAIL_PROCESSORS = (
    'image_cropping.thumbnail_processors.crop_corners',
) + thumbnail_settings.THUMBNAIL_PROCESSORS

配置

将一个ImageRatioField添加到包含您想要裁剪的图片的ImageField的模型中。

ImageRatioField只存储裁剪图片的边界。它期望作为参数的关联ImageField的名称和期望的裁剪图片尺寸。

尺寸以字符串形式传递,定义了选择区域的比例以及最终图片的最小尺寸

from django.db import models
from image_cropping import ImageRatioField

class MyModel(models.Model):
    image = models.ImageField(blank=True, upload_to='uploaded_images')
    # size is "width x height"
    cropping = ImageRatioField('image', '430x360')

如果用户尝试裁剪小于定义的最小尺寸的选择,您可以配置一个尺寸警告

管理集成

ImageCroppingMixin添加到您的ModelAdmin

from django.contrib import admin
from image_cropping import ImageCroppingMixin

class MyModelAdmin(ImageCroppingMixin, admin.ModelAdmin):
    pass

admin.site.register(MyModel, MyModelAdmin)

如果您的设置正确,您现在应该看到增强的图像小部件,它提供了一个选择区域。

后端

django-image-cropping将裁剪图片的生成委托给一个后端。

提供了一个基于easy-thumbnails的后端,但也可以使用自定义后端。设置IMAGE_CROPPING_BACKEND期望一个到实现所需方法的类的点路径。如果您想使用默认后端,可以省略此设置。

如果您使用自定义后端,您可以提供一个可选的字典,该字典将用于填充后端构造函数的参数。

默认设置

IMAGE_CROPPING_BACKEND = 'image_cropping.backends.easy_thumbs.EasyThumbnailsBackend'
IMAGE_CROPPING_BACKEND_PARAMS = {}

前端

django-image-cropping提供了一个用于显示裁剪缩略图的模板标签。任何其他处理器参数(如bw=Trueupscale=True)都将转发到后端

{% cropped_thumbnail yourmodelinstance "ratiofieldname" [scale=INT|width=INT|height=INT|max_size="INTxINT"] %}

示例用法

{% load cropping %}
<img src="{% cropped_thumbnail yourmodel "cropping" scale=0.5 %}">

或从Python代码在您的视图中生成URL

from image_cropping.utils import get_backend
thumbnail_url = get_backend().get_thumbnail_url(
    yourmodel.image,
    {
        'size': (430, 360),
        'box': yourmodel.cropping,
        'crop': True,
        'detail': True,
    }
)

easy_thumbnails

您也可以使用带box参数的标准easy-thumbnails模板标签

{% load thumbnail %}
{% thumbnail yourmodel.image 430x360 box=yourmodel.cropping crop detail %}

或从Python代码在您的视图中生成URL

from easy_thumbnails.files import get_thumbnailer
thumbnail_url = get_thumbnailer(yourmodel.image).get_thumbnail({
    'size': (430, 360),
    'box': yourmodel.cropping,
    'crop': True,
    'detail': True,
}).url

ModelForm

如果您想在管理外使用裁剪小部件,您需要将ImageField定义为ImageCropField

from django.db import models
from image_cropping import ImageCropField, ImageRatioField

class MyModel(models.Model):
    image = ImageCropField(blank=True, upload_to='uploaded_images')
    # size is "width x height"
    cropping = ImageRatioField('image', '430x360')

或者,覆盖您的ModelForm中的小部件(您只需做这两者之一即可,不要两者都做!)

from django import forms
from image_cropping import ImageCropWidget

class MyModelForm(forms.ModelForm):
    class Meta:
        widgets = {
            'image': ImageCropWidget,
        }

请记住,在HTML的<head>中包含表单媒体

<html>
  <head>
    {{ form.media }}
  </head>
  <body>
    {{ form }}
  </body>
</html>

裁剪本身发生在ImageRatioField中,ImageCropField仍将像常规的ImageField一样表现。

如果您从ModelForm中选择性地包含或排除字段,请记住包含ImageRatioField

多种格式

如果您需要在多种格式中使用相同的图片,只需指定另一个 ImageRatioField。这将允许图片被裁剪两次

from image_cropping import ImageRatioField, ImageCropField

image = ImageCropField(blank=True, upload_to='uploaded_images')
# size is "width x height"
list_page_cropping = ImageRatioField('image', '200x100')
detail_page_cropping = ImageRatioField('image', '430x360')

在您的模板中,使用相应的比例字段

{% load cropping %}
{% cropped_thumbnail yourmodel "list_page_cropping" %}

外键

如果您需要裁剪由外键引用的另一个模型中的图片,ImageRatioField 由外键名称、双下划线和 ImageField 名称组成

from django.db import models
from image_cropping.fields import ImageRatioField

class Image(models.Model):
    image_field = models.ImageField(upload_to='image/')

class NewsItem(models.Model):
    title = models.CharField(max_length=255)
    image = models.ForeignKey(Image)
    cropping = ImageRatioField('image__image_field', '120x100')

目前,裁剪外键仅在管理员中工作,因为它重新使用了 raw_id 小部件。

自由裁剪

如果您不需要 固定 的比例,可以将 free_crop 设置为 True 来禁用此约束。在这种情况下,大小参数是所需的最小尺寸,也用于大小警告

from image_cropping import ImageRatioField, ImageCropField

image = ImageCropField(blank=True, upload_to='uploaded_images')

# size is "width x height" so a minimum size of 200px x 100px would look like this:
min_free_cropping = ImageRatioField('image', '200x100', free_crop=True)

如果您想限制缩略图的显示大小,请使用 templatetag 的 max_size 参数

<img src="{% cropped_thumbnail image "cropping_free" max_size="200x200" %}" />

禁用裁剪

如果您想使裁剪成为可选的,请在您的 ImageRatioField 中使用 allow_fullsize=True 作为附加关键字参数。

编辑器现在可以通过取消勾选图像裁剪小部件旁边的复选框来关闭裁剪

image_with_optional_cropping = ImageRatioField('image', '200x100', allow_fullsize=True)

设置

缩略图大小

您可以在 settings 中定义管理员预览缩略图的最大尺寸

# size is "width x height"
IMAGE_CROPPING_THUMB_SIZE = (300, 300)

大小警告

您可以通过图像裁剪 ImageRatioField 中定义的尺寸来警告用户关于裁剪选择。当用户尝试进行较小的选择时,图像周围会出现红色边框。

要为单个图像使用此功能,请将 size_warning 参数添加到 ImageRatioField

cropping = ImageRatioField('image', '430x360', size_warning=True)

您可以通过在 settings 中添加以下行来在项目范围内启用此功能

IMAGE_CROPPING_SIZE_WARNING = True

自定义 jQuery

默认情况下,图像裁剪小部件使用与 Django 管理员一起打包的 jQuery 版本。

您可以使用 IMAGE_CROPPING_JQUERY_URL 设置指向另一个版本,但如果您的 jQuery 版本与测试版本不同,则可能存在兼容性问题。

您还可以将 IMAGE_CROPPING_JQUERY_URL 设置为 None 来禁用小部件中 jQuery 的包含。您现在负责在前端和管理界面中包含 jQuery

自定义后端

您可以定义一个自定义后端

IMAGE_CROPPING_BACKEND = 'image_cropping.backends.easy_thumbs.EasyThumbnailsBackend'

您可以提供一个可选的字典,该字典将用于填充后端构造函数

IMAGE_CROPPING_BACKEND_PARAMS = {'version_suffix': 'thumb'}

有关内置后端的信息,请参阅 后端

测试

  • 使用支持版本的 Python 设置虚拟环境

  • 安装示例项目: pip install -r example/requirements.txt

  • 运行 pytest

  • 如果您想针对多个 Python 版本进行测试,请安装并运行 tox

故障排除

当使用 ForeignKey 时,裁剪小部件未显示。

请确保您没有将相应的图像字段添加到 raw_id_fields

变更日志

1.7

1.6.2

  • 使用 Django 打包的 jQuery 作为图像裁剪的默认 jQuery

1.6.1

  • 向应用程序配置中添加默认设置 jquery url

1.6

  • 添加对 Django 3.2 的支持

  • 添加对 Python 3.9 的支持

1.5

  • 删除对 Python 3.5 的支持(尽管它仍然应该工作)

  • 添加对 Django 3.1 的支持

  • 最小化 JS 并减少与其他 django 库不兼容的可能性(见 #148)

  • 修复 formfield_for_dbfield 签名(#134)

  • 修复CSS属性单词分隔符 (#131)

  • 在测试中强制使用isort

1.4

  • 移除了更多旧代码

  • 将测试和打包移至GitHub Actions

1.3

  • 添加对Django 3.0的支持

  • 放弃对Python < 3.5的支持

  • 放弃对Django < 2.2的支持

1.2

  • 添加对Django 2.1的支持

1.1

  • 使django-image-cropping与Django 1.11兼容

1.0.4

  • 将创建裁剪缩略图的逻辑移动并封装到可替换的后端。(@fgmacedo 在 #92)

1.0

“如果你的软件正在生产中使用,它可能已经是1.0.0了。” (http://semver.org)

0.9

本版本主要解决测试覆盖率和内部问题。

值得注意(破坏性)的更改以及升级旧版本时需要考虑的事项

  • 现在使用 django-appconf 处理默认值和设置。

    • 破坏性更改:在这次过渡中将JQUERY_URL更改为IMAGE_CROPPING_JQUERY_URL。

  • cropped_thumbnail 标签现在基于Django的 simple tag

    • 破坏性更改:现在需要将标签的参数放在引号中。

    • 如果你还在使用Django 1.4,请记住,你无法轻易地将 TrueFalse 用作模板标签参数。(参考这里

  • 任何处理器参数(如bw=True或upscale=True)都可以用于 cropped_thumbnail 标签。

  • 将内联CSS移动到专门的 image_cropping.css 样式表

0.8

  • 最低要求更改为 Django 1.4easy-thumbnails 1.4

  • 添加Python 3兼容性。现在最低要求的Python版本是2.6。

  • 添加了 自由裁剪 选项,因此裁剪不再受固定比例的限制。

  • 移除了已弃用的 CropForeignKey 字段。

0.7

  • ImageCropField 的小部件改为可覆盖的,以允许自定义小部件。(请记住,在管理界面中使用 ImageCroppingMixin,因为图像裁剪小部件不再隐式设置。)

  • 更新了 JcropjQuery 依赖项。

  • 将文档移动到 Read the Docshttps://django-image-cropping.readthedocs.org

项目详情


下载文件

下载适用于您平台文件的文件。如果您不确定选择哪个,请了解有关安装包的更多信息。

源代码分发

django-image-cropping-1.7.tar.gz (32.9 kB 查看散列值)

上传时间 源代码

构建分发

django_image_cropping-1.7-py3-none-any.whl (43.9 kB 查看散列值)

上传时间 Python 3

支持者