Ümit Tunç
88 lines
2.8 KiB
JavaScript
88 lines
2.8 KiB
JavaScript
/*
|
|
|
|
* Document : be_comp_image_cropper.js
|
|
|
|
* Author : pixelcave
|
|
|
|
* Description: Custom JS code used in Image Cropper Page
|
|
|
|
*/
|
|
|
|
|
|
|
|
// Image Cropper, for more examples you can check out https://fengyuanchen.github.io/cropperjs/
|
|
|
|
class BeCompImageCropper {
|
|
|
|
/*
|
|
|
|
* Init image cropper demo functionality
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
static initImageCropper() {
|
|
|
|
// Get Image Container
|
|
|
|
let image = document.getElementById('js-img-cropper');
|
|
|
|
|
|
|
|
// Set Options
|
|
|
|
Cropper.setDefaults({
|
|
|
|
aspectRatio: 4 / 3,
|
|
|
|
preview: '.js-img-cropper-preview'
|
|
|
|
});
|
|
|
|
|
|
|
|
// Init Image Cropper
|
|
|
|
let cropper = new Cropper(image, {
|
|
|
|
crop: function (e) {
|
|
|
|
// e.detail contains all data required to crop the image server side
|
|
|
|
// You will have to send it to your custom server side script and crop the image there
|
|
|
|
// Since this event is fired each time you set the crop section, you could also use getData()
|
|
|
|
// method on demand. Please check out https://fengyuanchen.github.io/cropperjs/ for more info
|
|
|
|
// console.log(e.detail);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Mini Cropper API
|
|
|
|
jQuery('[data-toggle="cropper"]').on('click', e => {
|
|
|
|
let btn = jQuery(e.currentTarget);
|
|
|
|
let method = btn.data('method') || false;
|
|
|
|
let option = btn.data('option') || false;
|
|
|
|
|
|
|
|
// Method selection with object literals
|
|
|
|
let cropperAPI = {
|
|
|
|
zoom: () => {
|
|
|
|
cropper.zoom(option);
|
|
|
|
},
|
|
|
|
setDragMode: () => {
|
|
|
|
cropper.setDragMode(option);
|
|
|
|
},
|
|
|
|
rotate: () => {
|
|
|
|
cropper.rotate(option);
|
|
|
|
},
|
|
|
|
scaleX: () => {
|
|
|
|
cropper.scaleX(option);
|
|
|
|
btn.data('option', -(option));
|
|
|
|
},
|
|
|
|
scaleY: () => {
|
|
|
|
cropper.scaleY(option);
|
|
|
|
btn.data('option', -(option));
|
|
|
|
},
|
|
|
|
setAspectRatio: () => {
|
|
|
|
cropper.setAspectRatio(option);
|
|
|
|
},
|
|
|
|
crop: () => {
|
|
|
|
cropper.crop();
|
|
|
|
},
|
|
|
|
clear: () => {
|
|
|
|
cropper.clear();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// If method exists, execute it
|
|
|
|
if (cropperAPI[method]) {
|
|
|
|
cropperAPI[method]();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Init functionality
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
static init() {
|
|
|
|
this.initImageCropper();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Initialize when page loads
|
|
|
|
jQuery(() => { BeCompImageCropper.init(); });
|
|
|