Support image cropping in admin panel.
Opened this issue · 0 comments
sergeyglazyrindev commented
We should support image cropping in admin panel.
Previous uadmin html/js:
<script type="text/javascript">
cropper,
(function(win, doc, $){
"using script";
(function($){
"use strict";
var $modal = $("#myModal"),
img = null;
$("#crop_image").click(function(e){
$modal.find(".modal-footer .crop-btn").removeClass("hide");
$modal.find("#btnCropImageClose").addClass("hide");
img = $modal.find("#imgRawImage")[0];
cropper = new Cropper(img, {
zoomable: false,
});
});
$modal.find("#myModal [data-crop-cancel]").click(function(e){
$modal.find(".modal-footer .crop-btn").addClass("hide");
$modal.find("#btnCropImageClose").removeClass("hide");
});
$modal.find("form")[0].onsubmit = function(e){
e.preventDefault();
var canvas = cropper.getCroppedCanvas();
$modal.find("[name=cropped_image]").prop("src", canvas.toDataURL());
};
})($);
$("#export_form")[0].onsubmit = function(e){
(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
var url = this.action,
filters = win.location.search.substr(1).split("&") || [],
len = filters.length,
i = 0;
for (; i < len; i ++) {
if (filters[i] === "" || filters[i].indexOf("p=") !== -1 || filters[i].indexOf("o=") !== -1) {
filters.splice(i, 1);
}
}
if (filters.length > 0) {
url += "&" + filters.join("&");
}
//console.log(url);
win.open(url, "_self");
};
})(window, document, $);
function imageCrop(){
$('.image_trigger').click(function(){
var a = $(this).attr('src');
var header = $(this).parent().parent().find('td').find('a.ID');
console.log(header);
var content = "";
var rawFile = a.substr(0,a.lastIndexOf(".")) + "_raw" + a.substr(a.lastIndexOf("."));
content += '<center><img src="'+rawFile+'" style="max-width:70%;max-height:80%;" id="imgRawImage"/></center>';
$('#myModal>div>div>.modal-body').html(content);
$('#myModal>div>div>div>.modal-title').text(header.text());
$('#myModal [name=img_id]').val($(this).parent().parent().find('td [data-id]').data('id'));
$('#myModal').modal('show');
});
}
imageCrop();
//SET TABLE ORDER
//*
$('a.camelcaseFix').each(function(){
$(this).text($(this).text().replace("__List",""));
$(this).text($(this).text().replace("__Form",""));
});
function cropImage() {
var imageSource = $("#imgRawImage").attr("src");
var top, left, bottom, right;
var data = cropper.getData();
// left = cropper.cropBoxData.left - cropper.canvasData.left;
// left *= cropper.canvasData.aspectRatio;
// top = cropper.cropBoxData.top - cropper.canvasData.top;
// top *= cropper.canvasData.aspectRatio;
left = data.y;
top = data.x;
right = left + data.width;
bottom = top + data.height;
// bottom = (cropper.cropBoxData.height * cropper.canvasData.aspectRatio) + top;
// right = (cropper.cropBoxData.width * cropper.canvasData.aspectRatio) + left;
$.get("{{.RootURL}}cropper/?img=" + imageSource + "&left=" + left + "&right=" + right + "&top=" + top + "&bottom=" + bottom, function() {
});
$("#myModal").modal("hide");
}
$("#btnCropImage").on("click", cropImage);
</script>
<!-- Modal -->
<div id="myModal" class="modal fade z-index99999" role="dialog" style="width:100%;">
<div class="modal-dialog" style="width:60%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<button type="button" class="btn btn-default btn-xs" id="crop_image">
<span class="fa fa-crop"></span>
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- <p>Some text in the modal.</p> -->
</div>
<div class="modal-footer">
<form action="" method="post" enctype="multipart/form-data">
<button type="button" id="btnCropImage" class="btn btn-success crop-btn hide" data-crop name="save_cropped_image" value="save_cropped_image">Crop</button>
<button type="button" class="btn btn-warning crop-btn hide" data-dismiss="modal" data-crop-cancel>{{Tf "uadmin/system" .Language.Code "Cancel"}}</button>
</form>
<button type="button" class="btn btn-default" id="btnCropImageClose" data-dismiss="modal">{{Tf "uadmin/system" .Language.Code "Close"}}</button>
</div>
</div>
</div>
</div>