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

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 52

  • @Pyplane
    @Pyplane  4 ปีที่แล้ว +8

    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
    @mohammedrayyan7308 2 ปีที่แล้ว +1

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

  • @danielnolan320
    @danielnolan320 4 ปีที่แล้ว +2

    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
      @Pyplane  4 ปีที่แล้ว +1

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

  • @paborlouise319
    @paborlouise319 4 ปีที่แล้ว

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

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

      Thank you Pabor! All the best to you!

    • @paborlouise319
      @paborlouise319 4 ปีที่แล้ว

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

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

      @@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
      @paborlouise319 4 ปีที่แล้ว

      @@Pyplane okay good 👍🏻. Thanks.

  • @denisbuldakov6284
    @denisbuldakov6284 4 ปีที่แล้ว +2

    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...

  • @ericryan8152
    @ericryan8152 3 ปีที่แล้ว

    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!

  • @dhruvilshah9098
    @dhruvilshah9098 4 ปีที่แล้ว +1

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

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว +2

      Cool! Very happy to read this :) Cheers!

  • @Andreas-iy7hn
    @Andreas-iy7hn 3 ปีที่แล้ว +1

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

    • @Pyplane
      @Pyplane  3 ปีที่แล้ว

      Thank you Andreas! :)

    • @Andreas-iy7hn
      @Andreas-iy7hn 3 ปีที่แล้ว

      @@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
      @Andreas-iy7hn 3 ปีที่แล้ว

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

  • @invilso4051
    @invilso4051 3 ปีที่แล้ว

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

  • @fadhilahrizkifatoni4380
    @fadhilahrizkifatoni4380 2 ปีที่แล้ว +1

    How to send the cropped image to backend without ajax ?

  • @mateoclemente7824
    @mateoclemente7824 2 ปีที่แล้ว

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

  • @OxMiroslav
    @OxMiroslav 4 ปีที่แล้ว +3

    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
      @frost1204 3 ปีที่แล้ว

      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
      @ayushrathore8296 2 ปีที่แล้ว

      Thanks bro, you saved me a lot of time

    • @thing2know
      @thing2know 2 ปีที่แล้ว

      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

  • @thing2know
    @thing2know 2 ปีที่แล้ว

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

  • @rangabharath4253
    @rangabharath4253 4 ปีที่แล้ว

    Awesome as always 👍😀

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

      Thank you Ranga :))

  • @szymonpopielarz7701
    @szymonpopielarz7701 4 ปีที่แล้ว

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

  • @thing2know
    @thing2know 2 ปีที่แล้ว

    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..

  • @jithinrajmmwayanad4267
    @jithinrajmmwayanad4267 2 ปีที่แล้ว

    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

  • @arifmoazy1371
    @arifmoazy1371 4 ปีที่แล้ว

    keep up the great work

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

      thank you!

  • @AbdullahAbdullah-lh5mw
    @AbdullahAbdullah-lh5mw ปีที่แล้ว

    Why the size of the image increase after cropping ??

  • @UmaDevi-dv4wt
    @UmaDevi-dv4wt 3 ปีที่แล้ว

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

  • @mohammadshafayethaydar1652
    @mohammadshafayethaydar1652 4 ปีที่แล้ว

    You're just awesome. Thankful to you.

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

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

  • @josevelez6865
    @josevelez6865 4 ปีที่แล้ว

    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
      @김태연-z8y 2 ปีที่แล้ว

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

  • @derekkroeker4582
    @derekkroeker4582 2 ปีที่แล้ว

    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.

  • @mahmudsajib8648
    @mahmudsajib8648 4 ปีที่แล้ว

    Awesome thanks man!

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

      Thanks for watching Mahmud!

  • @aayushpatil7514
    @aayushpatil7514 4 ปีที่แล้ว

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

  • @jithinrajmmwayanad4267
    @jithinrajmmwayanad4267 2 ปีที่แล้ว

    success is not working properly
    can you help me

  • @yukselbastan4687
    @yukselbastan4687 4 ปีที่แล้ว

    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
      @Pyplane  4 ปีที่แล้ว

      Hi Yuksel. Sorry to read this. Stay safe!

  • @rezasadeghi2520
    @rezasadeghi2520 4 ปีที่แล้ว

    Awesome! thanks

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

      Thanks for watching!

  • @irajdeepmondal
    @irajdeepmondal 4 ปีที่แล้ว +1

    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
      @Pyplane  4 ปีที่แล้ว

      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

  • @jameskulu
    @jameskulu 4 ปีที่แล้ว

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

    • @Pyplane
      @Pyplane  4 ปีที่แล้ว

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

  • @QTSkipper
    @QTSkipper 3 ปีที่แล้ว

    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%