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?

Dansby

You need to create custom widget. That task is not only for python. You need also java script on client side. – Amative

I think you should either accept the answer or specify your needs – Lollygag

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.

Georgeta

Could you please be a bit more specific about how to do that in the django admin? I don't have much knowledge about the front-end technologies. – Dansby

I'm actually not very well acquainted with the Django admin, so I'm not too sure about the specifics. I did a little Googling and found this article that might be useful, though: mechanicalgirl.com/post/… The article is about creating a drag-and-drop image uploader, but you could probably replace that functionality with a cropping library. – Georgeta

Answer 2

The django-client-side-image-cropping library crops the image on client-side (Using the Croppie Javascript library) to a specific size. It is compatible with django-admin sites. It does not use AJAX. It uses InMemoryUploadedFile to temporarily store the original file.

Conceptionconceptual

Answer 3

django-cropper-image is an app I made for client side cropping and compressing uploaded images via Django’s app using with help cropper.js. github link django-cropper-image.

from django.db import models
from django_cropper_image.fields import ImageCropperField
class Images(models.Model):
    image = ImageCropperField(upload_to='image',max_length=255)

Ephesian