How to crop images in Django and Javascript | Django and ajax

🔥 Join the facebook group:
/ djangoninjas 🚀
🔥 Follow pyplane on:
➜ instagram: / pyplaneblog
➜ pinterest: / pyplane
➜ facebook: / pyplane
🔥 More on python and django:
➜ blog.pyplane.com
PART 10 of the Django & Javascript tutorial series
Full playlist: tinyurl.com/yy...
Learn how to crop images in Django and Javascript (with jquery ajax) in a project based tutorial.
** NOTE ** it's recommended to watch previous videos before proceeding with this one.
Links:
➜ cropper docs: github.com/fen...
➜ images: pixabay.com
#django #javascript #cropimages

[@Pyplane]

Hi! Under this link you can find the source code including base.html with cdns for the cropper js library: blog.pyplane.com/blog/how-to-crop-images-in-django-with-javascript/ Cheers!

[@mohammedrayyan7308]

Thanks man , You saved my day without this tutorial I couldn't have completed my project. Appreciate your work

[@danielnolan320]

Simply amazing! This taught me exactly what I needed. I cannot thank you enough for your videos. Facebook group is a great idea too. I'll see you there!

[@Pyplane]

Thanks Daniel. I should actually also thank you, because this project perfectly fits to this django & js series! Cheers!

[@ericryan8152]

Thank you so much for this tutorial! I just completed a student project where I had to allow Django users crop a photo. It was tough to figure out and I didn’t quite get it to work like I wanted it to, good enough to pass the project, but not like I wanted. I’ll definitely be keeping this video to reference for the next time I implement this feature!

[@denisbuldakov6284]

Sir, your tutorials are absolutely great! It would be great if you could extend this video to show an example with existing image. Something like: click on the image -> redirect to the crop page (or bs modal) -> crop the image ->save/replace the existing image. I would do it myself but I'm crap at js...

[@paborlouise319]

Django and vanilla Js is getting crazier than I thought. Luke you're the man. Sweet 👍🏻.

[@Pyplane]

Thank you Pabor! All the best to you!

[@paborlouise319]

@@Pyplane pls can you do a video on default image size in django. i.e setting the img size in the backend.

[@Pyplane]

@@paborlouise319 I don't know right now if I haven't created something like that in Django with opencv or in Django with ai. Will look later into those videos and if this what you are asking for is not there I'll think about putting it into future tutorials

[@paborlouise319]

@@Pyplane okay good 👍🏻. Thanks.

[@dhruvilshah9098]

Awesome sir, adding many of your Js things in my projects.

[@Pyplane]

Cool! Very happy to read this :) Cheers!

[@invilso4051]

It's a best video. Very helpfules. The video help me in my problem.

[@Andreas-iy7hn]

Finally got what I have been searching, nice work :) subscriber += 1

[@Pyplane]

Thank you Andreas! :)

[@Andreas-iy7hn]

@@Pyplane hi pyplane, I'm creating a form with title and cropped picture; however, I'm getting error that crop_image_title doesn't exist in the table. Moreover, I tried another method but the title doesn't appear in the table. I'm thinking about the Ajax request and post thing since I have no idea about AJAX :(. Any suggestion or solution would help :)

[@Andreas-iy7hn]

I also did makemigrations and migrate, and of course added title in the form

[@fadhilahrizkifatoni4380]

How to send the cropped image to backend without ajax ?

[@mateoclemente7824]

Great tuto! Could we get a github to try it ourselves?

[@mohammadshafayethaydar1652]

You're just awesome. Thankful to you.

[@Pyplane]

Hi Mohammad! Very happy you enjoy my videos :) Cheers!

[@aayushpatil7514]

Please make a video on integrating Django with editor js ❤️❤️❤️

[@rangabharath4253]

Awesome as always 👍😀

[@Pyplane]

Thank you Ranga :))

[@arifmoazy1371]

keep up the great work

[@Pyplane]

thank you!

[@OxMiroslav]

I was trying to crop and upload an image based on this tutorial. However, It didn't go smoothly as for author since I had have different name for table file column. I spend a lot of time debugging missing "file" and no save to form in Django. The most critical row is "fd.append('file', blob, 'my-image.png');" The first parameter 'file' is related to database column in your database. Author called it 'file', if you'll have different name (for example avatar) change it "fd.append('avatar', blob, 'my-image.png');" . Hope it helps somebody.

[@frost1204]

I spent abt an hour or more trying to figure this out xD if only i have read this earlier. Tho trying to debug everything gave me a better understanding of the code

[@ayushrathore8296]

Thanks bro, you saved me a lot of time

[@thing2know]

Hi, I am not getting output after changing the file name but I am getting total image as output but I am not getting cropped image output,may i know the reason please. Thank you

[@jithinrajmmwayanad4267]

i have a suggetion for you ... please explain the method which your using in javascript , mens in this video you were used createobject url but you didint metion what it does..... its better to understand pls pls pls

[@mahmudsajib8648]

Awesome thanks man!

[@Pyplane]

Thanks for watching Mahmud!

[@thing2know]

its awesome tutorial in my project the total code is working fine but the picture will not cropped certain size after selecting the image particular size the image is successfully submitted but full image will be submitted .may i know where is the error.? thank you..

[@irajdeepmondal]

Amazing video sir, as always. But I can't join the Facebook group, it says "This Content Isn't Available Right Now When this happens, it's usually because the owner only shared it with a small group of people, changed who can see it or it's been deleted.".

[@Pyplane]

Hi Rajdeep. Thanks for the feedback. That's really strange because I didn't provide any weird settings. Can you try again later? Once again sorry for the trouble

[@rezasadeghi2520]

Awesome! thanks

[@Pyplane]

Thanks for watching!

[@szymonpopielarz7701]

Could you do tutorial with cropping profile picture for django user? How do it when on website are 2 forms (one for account and one for image connected OneToOneField to django user account)?

[@derekkroeker4582]

How to only be able to scale with Width and height at the same time, so it stays in the same shape, but just being able to scale and choose area.

[@QTSkipper]

If anyone facing the issue of empty space forming at the side of the image, then just replace, width="500px" at line 16 of main.js by width=100%

[@josevelez6865]

Thanks for sharing this! Very helpful. One question, I am trying to get mine to redirect to a different page after success. I cannot figure it out. Any tips?

[@김태연-z8y]

I'm facing the same problem. Did you find a solution?

[@thing2know]

Hi is there any tutorial to crop the video file in django.

[@AbdullahAbdullah-lh5mw]

Why the size of the image increase after cropping ??

[@UmaDevi-dv4wt]

hey plss can you help me I got an error that image cropper is not defined but my code is correct

[@jameskulu]

can you make tutorial for adding filter in pictures like in instagram ?

[@Pyplane]

Hi James. I think I did something like that already. Have you seen the django with opencv video? Cheers!

[@yukselbastan4687]

We had a big Earthquake here in izmir Turkiye, it's possible that i can't write for some days because of bad internet connection. If its possible we want a video for rotating images. Thanks.

[@Pyplane]

Hi Yuksel. Sorry to read this. Stay safe!

[@jithinrajmmwayanad4267]

success is not working properly can you help me