Cropper JS снижает качество изображения после обрезки *Django Application*.

У меня проблемы с качеством изображения обрезанных фотографий. Все работает и отображается правильно, но единственная проблема заключается в том, что качество изображения снижается после обрезки. В базе данных изображения выглядят так же, как и во фронтенде (низкое качество). Я знаю, что на вопрос был дан ответ Using Cropper js Image quality get reduced after cropping, но я все еще не могу заставить его работать. Если кто-то может помочь, буду очень признателен.

base.html

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href= "{% static 'css/main.css' %}" rel="stylesheet">
    <link href= "{% static 'css/profile.css' %}" rel="stylesheet">



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
...

    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/cropper.min.js' %}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css" integrity="sha512-+VDbDxc9zesADd49pfvz7CgsOl2xREI/7gnzcdyA9XjuTxLXrdpuz21VVIqc5HPfZji2CypSbxx1lgD7BgBK5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

profile_uploads.html

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

        /* SCRIPTS TO HANDLE THE CROPPER BOX */
        var $image = $("#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>

Вернуться на верх