Görüntü, div veya modal'ın içine yeniden boyutlandırıldığında benim çözüm işim;
<script src="~/assets/global/plugins/jcrop/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
var imageCropWidth = 0;
var imageCropHeight = 0;
var cropPointX = 0;
var cropPointY = 0;
var isOk = false;
$(document).ready(function() {
initCrop();
});
$("#hl-crop-image").on("click", function (e) {
e.preventDefault();
cropImage();
});
function initCrop() {
$('#my-origin-image').Jcrop({
onChange: setCoordsAndImgSize,
aspectRatio: 1,
bgOpacity: 0.25,
bgColor: 'black',
borderOpacity: 1,
handleOpacity: 1,
addClass: 'jcrop-normal'
});
}
function setCoordsAndImgSize(e) {
imageCropWidth = e.w;
imageCropHeight = e.h;
cropPointX = e.x;
cropPointY = e.y;
if (e.w <= 10 || e.h <= 10) {
$("#hl-crop-image").removeClass("btn-success").addClass("btn-default");
isOk = false;
}
else {
$("#hl-crop-image").removeClass("btn-default").addClass("btn-success");
isOk = true;
}
}
function cropImage() {
if (imageCropWidth == 0 && imageCropHeight == 0) {
alert("Please, select an area.");
return;
}
var pic = $("#my-origin-image")
// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");
yukleniyor();
var pW = $("#my-origin-image")[0].naturalWidth/$("#my-origin-image").width();
var pH = $("#my-origin-image")[0].naturalHeight/$("#my-origin-image").height();
pW = pW.toFixed(2);
pH = pH.toFixed(2);
if (isOk == true) {
$.ajax({
url: '/Profile/CropImae',
type: 'POST',
data: {
imagePath: $("#my-origin-image").attr("src"),
cropPointX: (cropPointX * pW).toFixed(0),
cropPointY: (cropPointY * pH).toFixed(0),
imageCropWidth: (imageCropWidth * pW).toFixed(0),
imageCropHeight: (imageCropHeight * pH).toFixed(0)
},
success: function (data) {
window.location = "/profile/info";
},
error: function (data) {
window.location = "/profile/info";
},
fail: function (data) {
window.location = "/profile/info";
}
});
} else { alert("Selected area is not enough!"); }
}
</script>
Benim aptal hack, bootstrap css'in bir kopyasını oluşturmak ve onu jcrop'um olduğu sayfa ile ilişkilendirmekti. Yani jcrop sayfasının kendi ayrı css dosyası var. Sonra bootstrap CSS'nin alt kısmına yorum yaptım ve her şey çalışmaya başladı ve hala mobil cihazlarda iyi görünüyor. Bunu yapmanın aptal bir yolu ama benim için çalıştı. –