Я искал библиотеку Cropp ie: https://foliotek.github.io/Croppie/
Но я не могу понять, как правильно его использовать, если я загружаю одно изображение (веб-странице требуется немного больше информации). Как я могу установить свое загруженное изображение внутри cropp ie? Я пробовал связывать или другими способами, но я не могу показать его внутри.
Я оставляю здесь свой код (почти то же самое, что он видел на официальной странице):
HTML
<div class="form-group">
<div id="image_user_profile" class="custom-input-file text-center">
<input id="fileInput" name="fileInput" type="file" size="1" class="input-file"/>
<img id="img_user" alt="Upload user image" src="{{ user.get_picture }}" width="50%" height="50%" style="background-color: #eee; min-height:100px"/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="img-user-prueba2">
</div>
</div>
</div>
JS
var uploadCrop = $('#img-user-prueba2').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
},
boundary: {
width: 300,
height: 300
}
});
$('input[name=fileInput]').change(function(ev) {
RegisterTraveler.readURL(this);
});