裁剪器不会在模式中的img元素中加载

我正在使用fengyuanchen的裁剪器裁剪上载的图像，然后将其发布。

<div id="change-dp" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
            <h2 class="uk-modal-title">Change Profile Picture</h2><br>
            <form action="{{url_for('upload_dp', username=username)}}" method="POST" enctype="multipart/form-data">
            <input type="file" accept="image/*" placeholder="Upload profile picture" onchange="loadFile(event)" id="uploaded" required>
            <img id="dp" onchange=""/>
                    
            <div id="cropped"></div>

            <button type="submit">Upload</button>
            </form>
        </div>
    </div>

Java脚本

var cropper;

function loadFile(image) {
    var dp = document.getElementById('dp')
    dp.src = URL.createObjectURL(image.target.files[0]);
    dp.onload = function() { URL.revokeObjectURL(dp.src)};
    cropper = new Cropper(dp, { aspectRatio: 1 });
};

想法是，一旦用户上传了图像，则使用裁剪器对其进行渲染，提交后，我将使用js将裁剪后的数据生成到裁剪后的div中，并将其作为dp提交到服务器。我无法得到裁剪机的显示。

我不使用大多数文档都在其中的jquery。

JSFiddle