<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
<link rel="stylesheet" href="http://doganozcine.com/dosyalar/main.css">
<div class="container mt-3">
<div class="row">
<div class="col-md-9">
<!-- <h3>Demo:</h3> -->
<div class="img-container">
<img id="image" src="https://fengyuanchen.github.io/jquery-cropper/images/picture.jpg" alt="Picture">
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<select id="bolumler" name="seolink" class="form-control form-control-sm" required>
<option value="">Bölüm seçiniz</option>
<option value="0,0">Free</option>
<option value="534,304,#about">Hakkımızda</option>
<option value="690,530,#blog">Blog</option>
<option value="1194,495,#facts">Rakamsal İstatistikler</option>
<option value="808,608,#portfolio">Ürünler</option>
<option value="270,93,#clients">Referansların Logoları</option>
<option value="400,400,#testimonials">Müşteri Görüşleri</option>
<option value="510,400,#team">Bizim Takım/Çalışanlar</option>
</select>
</div>
<div class="row">
<style>
.TeklibutonGenislikleri {
width:90px!important;
text-align: left;
}
</style>
<style>
.ikilibutonGenislikleri {
width:45px!important;
text-align: center;
}
</style>
<div class="col-md-3">
<div class="docs-preview clearfix">
<div class="img-preview preview-md"></div>
<div class="docs-buttons">
<div class="btn-group">
<label class="TeklibutonGenislikleri btn btn-primary btn-upload btn-sm" for="inputImage" title="Upload image file">
<input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Bilgisayarınızdan Fotoğraf Yükleyin">
<i class="fa fa-upload"></i> Yükle
</span>
</label>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm TeklibutonGenislikleri" data-method="getCroppedCanvas" title="Seçili bölümü kırp">
<i class="fa fa-crop"></i> Kırp
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning btn-sm TeklibutonGenislikleri" data-method="reset" title="Sıfırla">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
<i class="fa fa-refresh"></i> Sıfırla
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm ikilibutonGenislikleri" data-method="zoom" data-option="0.1" title="Yaklaştır">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
<span class="fa fa-search-plus"></span>
</span>
</button>
<button type="button" class="btn btn-primary btn-sm ikilibutonGenislikleri" data-method="zoom" data-option="-0.1" title="Uzaklaştır">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
<span class="fa fa-search-minus"></span>
</span>
</button>
</div>
<button class="btn btn-primary btn-sm TeklibutonGenislikleri" data-method="setDragMode" data-option="move" type="button" title="Move">
<span class="docs-tooltip" data-toggle="tooltip" title="Sürükle" data-original-title="">
<i class="fas fa-arrows-alt"></i> Taşı
</span>
</button>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm ikilibutonGenislikleri" data-method="rotate" data-option="-45" title="Sola döndür">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
<span class="fa fa-rotate-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary btn-sm ikilibutonGenislikleri" data-method="rotate" data-option="45" title="Sağa döndür">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
<span class="fa fa-rotate-right"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm ikilibutonGenislikleri" data-method="scaleX" data-option="-1" title="Yatay Çevir">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="">
<span class="fa fa-arrows-h"></span>
</span>
</button>
<button type="button" class="btn btn-primary bt-sm ikilibutonGenislikleri" data-method="scaleY" data-option="-1" title="Dikey çevir">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="">
<span class="fa fa-arrows-v"></span>
</span>
</button>
</div>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="getCroppedCanvasTitle">Kırpılan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Vazgeç</button>
<a class="btn btn-primary btn-sm" id="download" href="javascript:void(0);" download="cropped.jpg">İndir</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="http://doganozcine.com/dosyalar/cropper.js"></script>
<script src="http://doganozcine.com/dosyalar/jquery-cropper.js"></script>
<script src="http://doganozcine.com/dosyalar/main.js"></script>
<script type="text/javascript">
var genislik;
var yukseklik;
$('#bolumler').on('change', function() {
var degerler = ( this.value );
//console.log(degerler);
var bolumlerDizi = degerler.split(',');
genislik = bolumlerDizi[0];
yukseklik = bolumlerDizi[1];
console.log("Cropper must width!: " + genislik);
console.log("Cropper must height!: " + yukseklik);
});
//var genislik = 800;
//var yukseklik = 200;
var options = {
data: {
width: genislik,
height: yukseklik,
},
/*
minCropBoxWidth: genislik,
minCropBoxHeight: yukseklik,
minCanvasWidth: genislik,
minCanvasHeight: yukseklik,
minContainerWidth: genislik,
minContainerHeight: yukseklik,
//responsive:true,*/
aspectRatio: genislik/yukseklik,
viewMode: 1,
restore: false,
guides: false,
center: false,
dragCrop:false,
highlight: false,
cropBoxMovable: true,
cropBoxResizable: true,
rotatable:false,
zoomable:false,
preview: '.img-preview',
//strict:true,
//draggable:true,
crop: function(e) {
// $dataX.val(Math.round(e.detail.x));
//$dataY.val(Math.round(e.detail.y));
//$dataHeight.val(Math.round(e.detail.height));
//$dataWidth.val(Math.round(e.detail.width));
//$dataRotate.val(e.detail.rotate);
//$dataScaleX.val(e.detail.scaleX);
//$dataScaleY.val(e.detail.scaleY);
},
};
</script>