Upload an image with AJAX, crop portion of our choice, and save in django admin

Question

I need to give the admin the feature of uploading an image for an ImageField using AJAX, and then crop the portion of his choice (with a predefined dimension ratio or resolution) and then save the cropped image in the database.

I tried django-image-cropping and django-ajaximage for this.

#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
                         )

While django-ajaximage uploads an image using AJAX, but it doesn't allow the admin to choose which part of the image he wants to be cropped, django-image-cropping crops an image in two steps: first we need to upload an image, save it to the db, then again we need to open the object and select crop portion, and save it again to the database, which i feel is unnecessarily cumbersome. Any suggestions?

Answer 1

It looks like you'll need a JS library in the browser that does the actual cropping. Then you can use AJAX to send it to the server.

DarkroomJS might be just what you need. It uses the HTML5 canvas to do the image editing in browser. It's actually got a few more features than you need, but it should get the job done.