Javascript 裁剪机不'；t模态中img元件中的载荷

我正在使用冯元晨的裁剪器裁剪上传的图片，然后将其发布到表单中

<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>

这个想法是，一旦用户上传了一个图像，它就会用裁剪器呈现，在提交时，我会用js将裁剪后的数据生成裁剪后的div，并将其作为dp提交给服务器。我无法显示cropper

我不使用jquery，大多数文档都在jquery中

---

看起来您加载了cropper脚本不受信任的域站点，并且忘记加载css文件。以下是CDN的官方链接：

//CSS
//剧本

这并不能解决问题。我使用下载的文件。这只是JSFIDLE的一个设置。我不认为安全性是JSFIDLE的问题，它不重要。Cropper没有出现。你知道上面代码中的问题是什么吗？如果我看不到你是如何实现的，我怎么说？但是可能您的裁剪器对象/样式没有加载，样式也很重要，它显示了一些供您交互的内容？我可以向您保证，加载crapper.min.css或crapper.min.js没有问题。上面的代码在JSFIDLE上呈现。如果您想在上面的JSFIDLE上使用您的cdnjs链接，这不会有什么区别。我已经写了上面的代码，没错。它确实奏效了。我认为crapper.min.css不起作用。css给了我裁剪器。非常感谢男人@tmhao2005

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 });
};

// CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.css" integrity="sha512-AuLN6bHjJzqZ+Iw48+GdQPp5uKBdPX6+zWV37ju9zw7XIrevIX01RsLtpTU/zCoQcKrQRPe/EpwDpZiv7OUYMA==" crossorigin="anonymous" />

// Script
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.js" integrity="sha512-N4T9zTrqZUWCEhVU2uD0m47ADCWYRfEGNQ+dx/lYdQvOn+5FJZxcyHOY68QKsjTEC7Oa234qhXFhjPGQu6vhqg==" crossorigin="anonymous"></script>