Adding crop and rotate to django image upload

[201...@gmail.com]

Hello,

I confess that I have no experience with django.

I have a project where the django app was written by developers and I want to add a few things to a form that uploads an image. The image currently uploads but the user cannot rotate and crop the image to their liking.

The site is using

class ExampleModel(models.Model):
    model_pic = models.ImageField(upload_to = 'pic_folder/'

in the form for image uploading. And the form code where the image is uploaded...

                                    <h3>Upload Photo</h3>
                                    <div class="form-group">
                                        (Maximum image size should be 8 MB)
                                        <input type="file" name="profile_image" placeholder="Uploaded_Image*" class="form-control input-field" required>
                                    </div>

I would like to incorporate rotate and crop functions to the image where the user can adjust these settings on the same form before it is saved.

I found this:

https://pqina.nl/slim/

and wonder if it can be used in the django form.
Otherwise, maybe PIL can be used; it is already incorporated on the site for automatic image compositing after the upload.


Thanks!

[Mark Phillips]

You could look at this project for ideas on how to accomplish your crop and rotate actions - https://github.com/matthewwithanm/django-imagekit

However, if you want the user to manually crop and rotate the image on your site while looking at a Django view, then you will have to use some Javascript to do the cropping and rotation on the client side. Every change to a Django view (ie rotate a few degrees or move the crop box) involves a round trip to the server, which will be slow and a miserable experience for your users.

Here one example of cropping images with django and jquery - https://simpleisbetterthancomplex.com/tutorial/2017/03/02/how-to-crop-images-in-a-django-application.html

And another - http://blog.appliedinformaticsinc.com/how-to-add-image-cropping-features-using-django-image-cropping-app-jcrop/

I have not used any of these tools myself, so ymmv.

Google will find many many more projects/blogs on this topic.

Good luck!

Mark

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/a4ad8da3-6159-4104-b0f2-1347f3b6ac9a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[201...@gmail.com]

Thanks for the reply Mark! We are looking for a programmer who can do this for us...