Cropper JS увеличивает изображение на мобильных устройствах, если отключен

Я пытаюсь использовать cropper JS, чтобы позволить пользователям обрезать изображения при загрузке. Однако я хочу отключить масштабирование на мобильных устройствах, так как считаю, что это не очень удобно для пользователя. Я пытался отключить все, что связано с зумом, перемещением и масштабированием, но каждый раз, когда я пытаюсь изменить размер кроппера на моем мобильном, он увеличивается.

Есть идеи, как отключить?

<div class="img-container image-container" id="id_image_container">
                    
        <img class="profile-image" id="id_image_btn_display" src="">
        <div class="img-btn" id="id_middle_container">
             <div class="btn btn-primary" id="id_text">Upload Picture<br><small>(Max size: 10MB)</small></div>
        </div>
        <div class="p-5">
            <input class="d-none" type="file" name="profile_image" id="id_image_btn" onchange="readURL(this)">
        </div>
                        
</div>
<script type="module" src="{% static 'cropperjs/dist/cropper.min.js' %}"></script>
<script>
   // start cropperjs

var cropper;
var imageFile;
var base64ImageString;
var cropX;
var cropY;
var cropWidth;
var cropHeight;
const minCroppedWidth = 300;
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                disableImageOverlay()
                var image = e.target.result
                var imageField = document.getElementById('id_image_btn_display')
                imageField.src = image
                cropper = new Cropper(imageField, {
                    // attempted to disable all zooming features
                    zoomable: false,
                    zoomOnTouch: false,
                    zoomOnWheel: false,
                    toggleDragModeOnDblclick: false,
                    scaleable: false,
                    movable: false,
                    crop(event) {
                        var cropWidth = event.detail.width // Stop crop box at minCroppedWidth
                        
                        if (cropWidth < minCroppedWidth) {
                            cropper.setData({
                                width: Math.max(minCroppedWidth, cropWidth)})

                        };
                        setImageCropProperties(
                            image,
                            event.detail.x,
                            event.detail.y,
                            cropWidth,
                            event.detail.height
                        )
                    }
                })
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
    function setImageCropProperties(image, x, y, width, height){
        imageFile = image
        cropX = x
        cropY = y
        cropWidth = width
        cropHeight = height
    }

var imageContainer = document.getElementById("id_image_container")
        imageContainer.addEventListener("click", function(event){
            document.getElementById('id_image_btn').click();
        });
</script>

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