Я создаю список изображений, которые можно изменить с помощью модема boostrap, используя Cropper js.
<% crop.forEach(function(crops) { %>
<div class="card mb-4 box-shadow" style="margin-right: 1em;">
<img data-enlargable class="card-img-top" src="/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>"
alt="<%= crops.nom %>" style="max-height: 255px; max-width: 348px; object-fit: contain; cursor: zoom-in;">
<input type="hidden" id="dataImage" data-catname="<%= crops.cat_nom %>" data-idcrop="<%= crops.cropped_id %>">
<div class="card-body">
<h5 class="card-title"><%= crops.cat_nom %></h5>
<p class="card-text"><%= crops.nom %></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" name="edit" class="btn btn-sm btn-outline-secondary"
data-path="/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>"
data-target="#modal" data-toggle="modal">Edit</button>
</div>
</div>
</div>
</div>
<% }) %>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Cropper</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<img id="image" src="" alt="Picture" style="max-width: 100%">
<input type="hidden" id="dataGetter">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="editCropToDb">Save</button>
</div>
</div>
</div>
</div>
</div>
И вот скрипт, который я придумал, чтобы получить img sr c и передайте его тегу изображения внутри модального окна, чтобы Кроппер мог его использовать. Я также добавил логи c для загрузки на мой сервер.
$('button[name="edit"]').click(function (event) {
var src = $(this).parents('.card').find('img').attr('src')
var crop_id = $(this).parents('.card').find('input').data('idcrop')
var cat_name = $(this).parents('.card').find('input').data('catname')
$('#dataGetter').data('idcrop', crop_id)
$('#dataGetter').data('catname', cat_name)
$('#dataGetter').data('source', src)
var image = document.getElementById('image');
$('#image').attr('src', src)
})
window.addEventListener('DOMContentLoaded', function () {
var image = document.getElementById('image');
var cropBoxData;
var canvasData;
var cropper;
console.log(image)
$('#modal').on('shown.bs.modal', function () {
cropper = new Cropper(image, {
autoCropArea: 0.7,
viewMode: 1,
center: true,
dragMode: 'move',
movable: true,
scalable: true,
guides: true,
zoomOnWheel: true,
cropBoxMovable: true,
wheelZoomRatio: 0.1,
ready: function () {
//Should set crop box data first here
cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
}
})
}).on('hidden.bs.modal', function () {
cropBoxData = cropper.getCropBoxData();
canvasData = cropper.getCanvasData();
cropper.destroy();
})
document.getElementById('editCropToDb').addEventListener('click', function () {
var initialUrl
var canvas
var crop_id = $('#dataGetter').data('idcrop')
var cat_name = $('#dataGetter').data('catname')
console.log(crop_id + '/' + cat_name)
if (cropper) { canvas = cropper.getCroppedCanvas() }
image.src = canvas.toDataURL();
canvas.toBlob(function (blob) {
var formData = new FormData()
formData.append('catname', cat_name)
formData.append('crop_id', crop_id)
formData.append('croppedImage', blob, 'croppedImage.png')
$.ajax('cropped/edit', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
alert('Modification faite')
location = '/cropped'
},
error: function () {
alert('erreur')
location = '/cropped'
}
})
})
})
});
Проблема, которую я получаю, заключается в том, что когда я нажимаю кнопку «редактировать» после загрузки страницы, появляется модальный режим, но Cropper не запускается. Если я закрою его и открою снова, Cropper запустится правильно, и я смогу обрезать свое изображение и загрузить его. Я только начинающий с jquery и все, поэтому, возможно, я могу получить любой совет и помощь по этому вопросу!