CropperJS没有工作fengyuanchen / cropperjs

Question

我对Cropper.JS有问题。他没有工作。但我在Chrome控制台中没有错误。我使用Github的fengyuanchen / cropperjs。其他浏览器同样的问题。没有工作但没有错误

来自文件输入的图像加载

HTML

<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />

<div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
        <span>Datei ausw&auml;hlen</span>
        <input type="file" name="AvatarInput" id="AvatarInput">
    </div>
    <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Lade dein Avatar hoch">
    </div>
        <div class="crop" style="display: none;">
            <img src="" id="cropbox" class="AvatarPreviewIMG img-fluid" />
            <div class="btn-group">
            <button class="btn btn-primary" type="button" id="cropperRoatate90"></button>                                                
        </div>
    </div>

</div>

JS

$('#AvatarInput').on('change', function () {
    var minCroppedWidth = 320;
    var minCroppedHeight = 160;
    var maxCroppedWidth = 640;
    var maxCroppedHeight = 320;
    readURL(this);
    $('.crop').css('display', 'block');
    console.log('ETS');
    var cropper = new Cropper(document.getElementById('cropbox'), {
        aspectRatio: 16 / 9,
        viewMode: 3,
        dragMode: 'crop',
        responsive: true,
        data: {
            width: (minCroppedWidth + maxCroppedWidth) / 2,
            height: (minCroppedHeight + maxCroppedHeight) / 2,
        },
        ready: function () {
            var cropper = this.cropper;
            console.log('READY');
            $('#cropperRoatate90').click(function () {
                cropper.rotate(90);
            });
        },
        crop: function (event) {
            var width = event.detail.width;
            var height = event.detail.height;
            if (
                width < minCroppedWidth
                || height < minCroppedHeight
                || width > maxCroppedWidth
                || height > maxCroppedHeight
            ) {
                cropper.setData({
                    width: Math.max(minCroppedWidth, Math.min(maxCroppedWidth, width)),
                    height: Math.max(minCroppedHeight, Math.min(maxCroppedHeight, height)),
                });
            }
            data.textContent = JSON.stringify(cropper.getData(true));
            console.log(data.textContent);
        },
    });
});

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#cropbox').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }else{
        //$('#img').attr('src', '/assets/no_preview.png');
    }
}

但是怎么了？我没有错误。

亲切的问候 丹尼尔·埃尔斯坎普（Daniel Elskamp） 来自德国