Django Image Cropper Pure JS Django.How

Author avatar wrote on 26/05/2022

  • Pure JS
  • integration cropper js
  • responsive

1.Include js files

2.Include css file

3.In place where you want to have cropper field place

  • Important that modal window must have the same id as cropper area but with “-modal“ at the and.
  • Same to show modal button but with “-button“ at the end.
  • Same to result field but with “-result“ at the end.
  • 4.Set onchange function to file input field


  • this – input file field
  • ‘croppimg-container1’ – container which will be cropper area
  • ‘outputImage1’ – preview image to show result before uploading
  • [1000,1000] – sizes of image you want to get
  • After form submission, in backend you need to decode data from field ( “croppimg-container1-result” ) by using python3 function “base64.b64decode(code)” and save result to file.