1

预期行为

禁用“enforceBoundary”并缩小我们希望在它周围有一个小图像和空白区域

实际行为

缩小一点并点击裁剪按钮后，我们有一个全白的图像，这不是我们所期望的

重现问题的步骤

在 iPhone 上使用 Safari 或 chrome 打开下面的 codepen 链接：

  1. 点击“添加”按钮
  2. 从您的图库中选择一张图片
  3. 模态现已开放。这是您在模态最顶部选择的图片和图片下方的范围滑块
  4. 尝试使用此范围滑块缩小，直到图像周围有一些空白区域
  5. 点击“裁剪”按钮，您将看到一张全白的图片，您选择的图片不见了！
  6. 注意：不要使用安卓设备。在每个安卓设备上都很好

示例链接

这是我的 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() {
    // alert('Shown pop');
    $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 : 'original',
            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

我已准备好讨论这个问题，我会感谢任何可以帮助我解决这个问题的人

4

0 回答 0