The method is called in the ready event. On the first call it works. When the modal is closed, I am destroying the cropper - cropper.destroy()
. After opening the modal second time, the cropper is initialized again but this time cropper.getCroppedCanvas()
returns null
let cropper = new Cropper(image, {
dragMode: 'move',
aspectRatio: ratio,
restore: false,
guides: false,
center: false,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
ready: function () {
modal.find(".save").on("click", function () {
console.log(cropper.getCroppedCanvas())
cropper.getCroppedCanvas().toBlob(function (blob) {
let formData = new FormData()
formData.append("croppedImage", blob)
jQuery.ajax({
method: "post",
url: "index.php?option=com_image_slideshows&task=slideshow.saveCroppedImage",
data: formData,
processData: false,
contentType: false
})
.done(function (response) {
modal.modal("hide")
})
})
})
cropper.crop()
}
})
On modal closing this happens:
modal.on("hidden.bs.modal", function () {
cropper.destroy()
jQuery("#cropper-modal .modal-body").html(
jQuery("<img>", {
id: "image",
"class": "cropper-hidden"
})
)
})
convert unknown time format to english time format dd/mm/yyyy in PHP [duplicate]
how do I replace all the url images in bloggerexample bp1
I have created a ASPNet MVC site
I'm trying to verify if a XML document got modified after I loaded my page, like maybe every 30 secondsI obtain the xml by making an AJAX request, and preferably, I want to compare the new one and the previous one before calling a function that displays...
I was using Bootstrap 4 popover and suddenly got stuck with this issueThe problem is I can not select the attribute inside data-content of a popover