nk20/templates/member/profile_picture_update.html

{% extends "member/profile_detail.html" %}
{% load i18n static pretty_money django_tables2 crispy_forms_tags %}

{% block profile_content %}
<form method="post" enctype="multipart/form-data" id="formUpload">
  {% csrf_token %}
  {{ form |crispy }}
</form>
<!-- MODAL TO CROP THE IMAGE -->
<div class="modal fade" id="modalCrop">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <img src="" id="modal-image" style="max-width: 100%;">
      </div>
      <div class="modal-footer">
        <div class="btn-group pull-left" role="group">
          <button type="button" class="btn btn-default" id="js-zoom-in">
            <span class="glyphicon glyphicon-zoom-in"></span>
          </button>
          <button type="button" class="btn btn-default js-zoom-out">
            <span class="glyphicon glyphicon-zoom-out"></span>
          </button>
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
        <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block extracss %}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css" rel="stylesheet">
{% endblock %}

{% block extrajavascript%}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.1/dist/jquery-cropper.min.js"></script>
    <script>
     $(function () {

         /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
         $("#id_image").change(function (e) {
             if (this.files && this.files[0]) {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("#modal-image").attr("src", e.target.result);
                     $("#modalCrop").modal("show");
                 }
                 reader.readAsDataURL(this.files[0]);
             }
         });

         /* SCRIPTS TO HANDLE THE CROPPER BOX */
         var $image = $("#modal-image");
         var cropBoxData;
         var canvasData;
         $("#modalCrop").on("shown.bs.modal", function () {
             $image.cropper({
                 viewMode: 1,
                 aspectRatio: 1/1,
                 minCropBoxWidth: 200,
                 minCropBoxHeight: 200,
                 ready: function () {
                     $image.cropper("setCanvasData", canvasData);
                     $image.cropper("setCropBoxData", cropBoxData);
                 }
             });
         }).on("hidden.bs.modal", function () {
             cropBoxData = $image.cropper("getCropBoxData");
             canvasData = $image.cropper("getCanvasData");
             $image.cropper("destroy");
         });

         $(".js-zoom-in").click(function () {
             $image.cropper("zoom", 0.1);
         });

         $(".js-zoom-out").click(function () {
             $image.cropper("zoom", -0.1);
         });

         /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
         $(".js-crop-and-upload").click(function () {
             var cropData = $image.cropper("getData");
             $("#id_x").val(cropData["x"]);
             $("#id_y").val(cropData["y"]);
             $("#id_height").val(cropData["height"]);
             $("#id_width").val(cropData["width"]);
             $("#formUpload").submit();
         });

     });
    </script>
{% endblock %}