croppie.js禁用enforceBoundary后iPhone裁剪返回全白图片问题求助

预期行为 #

禁用enforceBoundary参数后缩小图片，预期得到周围带留白的小尺寸裁剪结果

实际行为 #

小幅缩小图片后点击裁剪按钮，得到的结果为全白图片，不符合预期

问题复现步骤 #

• 点击「add」按钮
• 从相册中选择一张图片
• 弹窗打开后，选中的图片显示在弹窗顶部，图片下方有范围滑块控件
• 拖动滑块缩小图片，直到图片周围出现留白
• 点击「crop」按钮，可见返回结果为全白图片，选中的图片内容消失
• 注意：请勿使用安卓设备测试，该功能在所有安卓设备上运行正常

相关代码 #

HTML代码 #

<div class="row AddItemImage">
    <div class="remodal" data-remodal-id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="remodal-dialog">
            <div class="remodal-content">
                <div class="remodal-header">
                    <button data-remodal-action="close" class="remodal-close close"></button>
                </div>
                <div class="remodal-body">
                    <div id="upload-demo" class="center-block">
                    </div>
                </div>
                <div class="remodal-footer">
                    <button id="croppie-rotate" class="croppie-rotate btn DS-edit mt-0"><i class="icon-refresh"></i> rotate</button>
                    <button data-remodal-action="cancel" class="btn DS-remove mt-0">close</button>
                    <button data-remodal-action="confirm" id="cropImageBtn" class="btn DS-submit mt-0">crop</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6" data-image="image1">
        <div class="product product-2">
            <input type="file" class="item-img file center-block" id="file1" name="file1" style="display: none;" required />
            <figure class="product-media">
                <div style="position: relative;">
                    <img id="image1" data-input="file1" class="item-img-output product-image img-fluid w-100" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_640.png" onerror="this.onerror=null; this.src='/Contents/images/def_product.png'" />
                </div>
                <div class="product-action product-action-dark">
                    <a data-input="file1" data-hidden="hiddenimage1" class="btn-product AddImage" title="add"><span>add</span></a>
                </div>
            </figure>
        </div>
    </div>
</div>

JS代码 #

var InputID = '';
var hiddenInput = '';
var $uploadCrop,
    tempFilename,
    rawImg,
    imageId;

function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('.upload-demo').addClass('ready');
            rawImg = e.target.result;
            var inst = $('[data-remodal-id=cropImagePop]').remodal();
            inst.open();
        }
        reader.readAsDataURL(input.files[0]);
    } else {
        swal("Sorry - you're browser doesn't support the FileReader API");
    }
}

$uploadCrop = $('#upload-demo').croppie({
    viewport: {
        width: 300,
        height: 300,
        type: 'square'
    },
    boundary: {
        width: '100%',
        height: 400
    },
    enforceBoundary: false,
    enableExif: true,
    enableOrientation: true,
    enableResize: false,
});

$('#croppie-rotate').on('click', function(ev) {
    $uploadCrop.croppie('rotate', '90');
})
$(document).on('opening', '.remodal', function() {
    $uploadCrop.croppie('bind', {
        url: rawImg,
        orientation: 0
    }).then(function() {
        /*console.log('jQuery bind complete');*/
    });
});


$('.item-img').on('change',
    function() {
        imageId = $(this).data('id');
        tempFilename = $(this).val();
        $('#cancelCropBtn').data('id', imageId);
        readFile(this);
    });
$('#cropImageBtn').on('click',
    function(ev) {
        $uploadCrop.croppie('result', {
            type: 'base64',
            format: 'jpeg',
            quality: 0.7,
            size: {
                width: 1000,
                height: 1000
            },
            backgroundColor: '#fff'
        }).then(function(resp) {
            $('.item-img-output[data-input=' + InputID + ']').attr('src', resp);
            $('#' + hiddenInput).val(resp);
        });
    });

function add_image(input_id) {
    $("#" + input_id).focus().trigger('click');
    $("#" + input_id).unbind('click');
}

$('.AddImage').on('click',
    function() {
        InputID = $(this).data('input');
        hiddenInput = $(this).data('hidden');
        add_image(InputID);
        $(this).closest('.product').find('#' + InputID).change(function() {
            $(this).siblings('.product-media').find('.AddImage').click();
            $(this).bind('click')
        })
    })

运行环境 #

• 浏览器：Safari
• 版本：14

可配合讨论问题细节，恳请各位帮忙提供解决思路，非常感谢。

内容的提问来源于stack exchange，提问作者Mohammad Mahmudipur