画像のトリミングにはCroppicを使用しています。画面がフェードアウトしますが、モーダルの敵が表示されません。
<div class="col-lg-4 " id="timelineProfilePic">
<div id="cropContainerModal">
@if(Auth::user()->profile)
<img src="/user/{{Auth::user()->profile->thumbnil}}" class="bgImage">
@endif
</div>
<input type="hidden" name="_token" value="{{csrf_token()}}" id="pic_token">
</div>
<script>
var croppicContainerModalOptions = {
uploadUrl: '<?php echo url()?>/users/cover',
cropUrl: '<?php echo url()?>/users/crop',
modal: true,
imgEyecandyOpacity: 0.4,
loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
onBeforeImgUpload: function () {
console.log('onBeforeImgUpload')
},
onAfterImgUpload: function () {
console.log('onAfterImgUpload')
},
onImgDrag: function () {
console.log('onImgDrag')
},
onImgZoom: function () {
console.log('onImgZoom')
},
onBeforeImgCrop: function () {
console.log('onBeforeImgCrop')
},
onAfterImgCrop: function () {
console.log('onAfterImgCrop')
},
onReset: function () {
console.log('onReset')
},
onError: function (errormessage) {
console.log('onError:' + errormessage)
}
}
var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);
</script>