nk20/apps/member/templates/member/picture_update.html

{% extends "member/base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n crispy_forms_tags %}

{% block profile_content %}
<div class="card bg-light">
  <h3 class="card-header text-center">
    {{ title }}
  </h3>
  <div class="card-body">
    <div class="text-center">
      <form method="post" enctype="multipart/form-data" id="formUpload">
        {% csrf_token %}
        {{ form |crispy }}
      </form>
    </div>
    <!-- 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>
  </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 %}