Есть форма, через нее я вставляю фото, через плагин Croppie, чуть редактирую фото, и загружаю на сервер.

Далее у меня есть редактирование данной добавленной информации с формы и там есть Croppie, я хочу выводить загруженные фото в Croppie для редактирования фото.

У меня две загрузки фоток, фотка 1 и фотка 2.

Вывожу фото щас так.
<?php foreach ($images as $image) : ?>
<img style="width:100px; margin-right:20px" src="/media/uploads/<?php echo ($image->image) ?>">
<?php endforeach ?>

Скрипт Croppie, две обработки загрузки фоток, для фото 1 и для фото 2.
<script>
//Выводим выбранное фото 1
var croppieDemo = $('#croppie-photo').croppie({
enableOrientation: true,

showZoomer: true, //ползунок увеличить, уменьшить
enableResize: true,
mouseWheelZoom: 'ctrl',

viewport: {
width: 250,
height: 250,
type: 'rawcanvas'
},
boundary: {
width: '100%',
height: 300
}
});

$('#croppie-input').on('change', function() {
var reader = new FileReader();
reader.onload = function(e) {
croppieDemo.croppie('bind', {
url: e.target.result
});
}
$('#opnfoto').show();
reader.readAsDataURL(this.files[0]);
});


//Выводим выбранное фото 2
var croppieDemo2 = $('#croppie-photo2').croppie({
enableOrientation: true,

showZoomer: true,
enableResize: true,
mouseWheelZoom: 'ctrl',

viewport: {
width: 250,
height: 250,
type: 'rawcanvas'
},
boundary: {
width: '100%',
height: 300
}
});

$('#croppie-input2').on('change', function() {
var reader = new FileReader();
reader.onload = function(e) {
croppieDemo2.croppie('bind', {
url: e.target.result
});
}
$('#opnfoto2').show();
reader.readAsDataURL(this.files[0]);
});
</script>


Для вывода фото при выборе, <div id="croppie-photo"></div> и <div id="croppie-photo2"></div>

Может не совсем корректно описываю, не силен в программировании. Надеюсь меня понятно.
Я так понимаю то что я вывожу обычно где-то в шаблоне с бд фото, мне надо как-то передать в js в croppie, чтобы фото отобразились в <div id="croppie-photo"> и <div id="croppie-photo2">.