使用AJAX上传图像,裁剪我们选择的部分,然后保存在django admin中

Question

我需要为管理员提供上传ImageField使用AJAX 的图像的功能,然后裁剪他选择的部分(使用预定义的尺寸比率或分辨率),然后将裁剪的图像保存在数据库中.

我想django-image-cropping和django-ajaximage这个.

#Using django-image-cropping
from image_cropping import ImageRatioField
class Alumnus(models.Model):
    photo = models.ImageField(null=True, blank=True)
    cropped_photo = ImageRatioField('photo', '430x360')

#Using django-ajaximage
from ajaximage.fields import AjaxImageField
class Alumnus(models.Model):
    photo = AjaxImageField(
                           upload_to='alumni_photos',
                           max_height=400,
                           max_width=400,
                           crop=True
                         )

虽然django-ajaximage使用AJAX上传图像,但它不允许管理员选择他想要裁剪django-image-cropping的图像部分,分两步裁剪图像:首先我们需要上传图像,将其保存到数据库,然后我们再次需要打开对象并选择裁剪部分,然后将其再次保存到数据库中,我觉得这是不必要的麻烦.有什么建议？

Answer 1

看起来您需要浏览器中的 JS 库来执行实际的裁剪。然后就可以使用AJAX发送到服务器了。

DarkroomJS可能正是您所需要的。它使用 HTML5 画布在浏览器中进行图像编辑。实际上它的功能比您需要的多一些，但它应该可以完成工作。