Django Image Cropper Pure JS Django.How

• Pure JS
• integration cropper js
• responsive

1.Include js files

<br /> <script src="{% static 'js/cropper.js' %}"></script><br /> <script src="{% static 'js/eito_croppie.js' %}"></script><br />

2.Include css file

<link rel="stylesheet" href="{% static 'css/cropper.css'%}">

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

<br /> <input type="file" name="img1" onchange="croppTheImg(this,'croppimg-container1','outputImage1',[1000,1000])"><br /> <a class="button" onclick="displayDiv('croppimg-container1-modal')" id="croppimg-container1-button" style="display:none">Show Modal</a><br /> <img decoding="async" id="outputImage1" src="img/image-place-holder.gif" class="img-responsive p-v-05"></p> <div id="croppimg-container1-modal" class="modal" style="z-index:1"> <div class="cropper-modal__inner"> <a class="float-right display-5" onclick="hideDiv('croppimg-container1-modal')">X</a></p> <div id="croppimg-container1" ><img decoding="async" src="" class="img-responsive" style="display:block;"></div> <p> <input type="hidden" id="croppimg-container1-result" name="returnFile" style=""></p> <p class="center"> <a class="button" onclick="hideDiv('croppimg-container1-modal')">Ok</a> </p> </p></div> </div> <p>

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

<br /> onchange=”croppTheImg(this,’croppimg-container1′,’outputImage1′,[1000,1000])”<br />

where:

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.