如何允许用户在Django中裁剪其个人资料图片

问题描述

我正在尝试使用django-image-cropping来允许用户上传个人资料图像之前对其进行裁剪。遵循这些文档之后,我将其与easy_thumbnails一起使用pip进行了安装,并已将其添加到已安装的应用程序中并调整了缩略图处理器。

settings.py:

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,其中还包含我要裁剪的图像。

models.py:

from django.db import models
from image_cropping import ImageRatioField

class Profile(models.Model):
    image= models.ImageField(blank=True,null=True,default='profile_pics/default.png',upload_to='profile_pics')
    cropping = ImageRatioField('image','300x300')

然后我将ImageCroppingMixin集成到我的ModelAdmin中。

admin.py:

from django.contrib import admin
from image_cropping import ImageCroppingMixin

class ProfileAdmin(ImageCroppingMixin,admin.ModelAdmin):
    pass

admin.site.register(Profile,ProfileAdmin)

我的用户可以通过从ProfileModelForm ...呈现的模式来更新其个人资料...

forms.py:

class ProfileModelForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ('first_name','last_name','image')

...和my_profile_view

views.py:

def my_profile_view(request):
    profile = Profile.objects.get(user=request.user)
    form = ProfileModelForm(request.POST or None,request.FILES or None,instance=profile)

    if request.method == 'POST':
        if form.is_valid():
            form.save()

    context = {
        'profile': profile,'form': form,}
    return render(request,'users/my_profile.html',context)

这是我模板中的模态:

<button data-toggle="modal" data-target="#update" type="submit">Edit Profile</button>
<div class="modal" tabindex="-1" id="update">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update your profile</h5>
            </div>
            <form method="post" enctype="multipart/form-data" class="p-3">
                <div class="modal-body">
                    {% csrf_token %}
                    {{ form.as_p }}
                </div>
                <div class="modal-footer">
                    <div class="message-btn active">
                        <button type="submit">Update</button>
                        <button type="button" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

到目前为止,用户可以更新其个人资料图片,但无法选择裁剪。如果我进入django管理员,我确实会看到裁剪小部件,但是即使我在那里手动裁剪图像,它仍会在站点上以原尺寸显示。希望有人可以帮助我解决这个问题。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)