使用cropper.js和Django 2.2.7上传裁剪图片失败

Question

我正在尝试制作一个表单，用于查看用户配置文件并显示用户的图片。我制作了一个自定义的用户类，并添加了带有个人资料图片(头像(的新字段。想法是，当用户查看个人资料时，他可以点击自己的图片，然后弹出显示当前图片的模态表单(或看起来像匿名用户的默认图片(。然后，用户可以点击上传任何大小的新图片，并使用cropper.js将其裁剪为设置为220 x 300像素的标准格式。

为了发展这一点，我在互联网上举了几个例子，并将它们混合在一起。它完美地工作，直到我希望将新图片保存在用户数据库中，这只是被忽略，没有显示任何错误。当然，当我从管理界面上传图片时，它每次都能工作。

因此，我希望保存图片的部分是从模态形式触发的，它是用javascript编写的，用于从cropper.js:中获取数据

$(".js-crop-and-upload").click(function () {
var cropData = $image.cropper("getData");
$("#id_x").val(cropData["x"]);
$("#id_y").val(cropData["y"]);
$("#id_height").val(cropData["height"]);
$("#id_width").val(cropData["width"]);
$("#formUpload").submit();
console.log("BIO C&U");
$("#modalCrop").modal("hide")
});

我为提交时进行实际裁剪的表单制作了一个新的保存功能：

class ProfileForm(ModelForm):
x = forms.FloatField(widget=forms.HiddenInput())
y = forms.FloatField(widget=forms.HiddenInput())
width = forms.FloatField(widget=forms.HiddenInput())
height = forms.FloatField(widget=forms.HiddenInput())
class Meta:
model = user
fields = ('avatar', 'x', 'y', 'width', 'height',)
def __init__(self, *args, **kwargs):
super(ProfileForm, self).__init__(*args, **kwargs)
def save(self):
profile = super(ProfileForm, self).save()
x = self.cleaned_data.get('x')
y = self.cleaned_data.get('y')
w = self.cleaned_data.get('width')
h = self.cleaned_data.get('height')
image = Image.open(profile.avatar)
cropped_image = image.crop((x, y, w + x, h + y))
resized_image = cropped_image.resize((220, 300), Image.ANTIALIAS)
resized_image.save(profile.avatar.path)
image.save(profile.avatar.path)
return profile

我的表单有一个enctype集合：

<form method="post" enctype="multipart/form-data" action="" id="formUpload">

我做错了什么？

Answer 1

您可以安装django图像裁剪，您的问题将得到解决：

https://pypi.org/project/django-image-cropping/