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

Question

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

为了开发这个，我在 Internet 上取了几个例子并将它们混合在一起。在我希望将新图片保存到用户数据库之前，它可以完美运行，这将被忽略，不会显示任何错误。当然，当我从管理界面执行此操作并上传图片时，每次都有效。

所以，我想保存图片的部分是从模态形式触发的，它是写在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-image-cropping，您的问题将得到解决：

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

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

Uploading cropped picture fails with cropper.js and Django 2.2.7

javascript

django

cropperjs

cropper