%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/extensions/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/extensions/image-cropper.js |
/*========================================================================================= File Name: image-cropper.js Description: Image Cropper -------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ $(document).ready(function(){ /******************************** * Crop Demo * ********************************/ var $image = $('.main-demo-image'); var $download = $('.download'); var $dataX = $('.main-demo-dataX'); var $dataY = $('.main-demo-dataY'); var $dataHeight = $('.main-demo-dataHeight'); var $dataWidth = $('.main-demo-dataWidth'); var $dataRotate = $('.main-demo-dataRotate'); var $dataScaleX = $('.main-demo-dataScaleX'); var $dataScaleY = $('.main-demo-dataScaleY'); var options = { viewMode: 1, aspectRatio: 16 / 9, preview: '.img-preview', crop: function(e) { $dataX.val(Math.round(e.x)); $dataY.val(Math.round(e.y)); $dataHeight.val(Math.round(e.height)); $dataWidth.val(Math.round(e.width)); $dataRotate.val(e.rotate); $dataScaleX.val(e.scaleX); $dataScaleY.val(e.scaleY); } }; // Cropper $image.cropper(options); // Get Data $('.get-data-btn').on('click',function(){ result = $image.cropper("getData"); $('.get-data').val(JSON.stringify(result)); }); // Get Image Data $('.get-image-data-btn').on('click',function(){ result = $image.cropper("getImageData"); $('.get-image-data').val(JSON.stringify(result)); }); // Get Container Data $('.get-container-data-btn').on('click',function(){ result = $image.cropper("getContainerData"); $('.get-container-data').val(JSON.stringify(result)); }); // Get Canvas Data $('.get-canvas-data-btn').on('click',function(){ result = $image.cropper("getCanvasData"); $('.get-canvas-data').val(JSON.stringify(result)); }); // Get Cropbox Data $('.get-cropbox-data-btn').on('click',function(){ result = $image.cropper("getCropBoxData"); $('.get-cropbox-data').val(JSON.stringify(result)); }); // Download Cropped Canvas $('.download-cropped-canvas-btn').on('click',function(){ }); // Rotate Image -45 Degree $('.rotate-m45-deg').on('click',function(){ $image.cropper('rotate', -45); }); // Rotate Image 45 Degree $('.rotate-45-deg').on('click',function(){ $image.cropper('rotate', 45); }); // Rotate Image 180 Degree $('.rotate-180-deg').on('click',function(){ $image.cropper('rotate', 180); }); // Flip Horizontal $('.flip-horizontal').on('click',function(){ var dataOption = $(this).data('option'); $image.cropper('scaleX', -dataOption); $(this).data('option', -dataOption); }); // Flip Vertical $('.flip-vertical').on('click',function(){ var dataOption = $(this).data('option'); $image.cropper('scaleY', -dataOption); $(this).data('option', -dataOption); }); // Zoom In $('.zoom-in').on('click',function(){ $image.cropper('zoom', 0.1); }); /*********************************** * Basic Cropper * ***********************************/ $('.basic-cropper').cropper({ viewMode: 1, restore: false, zoomOnWheel: false }); /********************************* * No Overlay * *********************************/ $('.no-overlay').cropper({ viewMode: 1, modal: false, restore: false, zoomOnWheel: false }); /**************************************** * 16:9 Aspect Ratio * ****************************************/ $('.aspect-ratio-16-9').cropper({ viewMode: 1, aspectRatio: 16/9, autoCropArea: 0.65, restore: false, zoomOnWheel: false }); /*************************************** * 4:3 Aspect Ratio * ***************************************/ $('.aspect-ratio-4-3').cropper({ viewMode: 1, aspectRatio: 4/3, autoCropArea: 0.65, restore: false, zoomOnWheel: false }); /************************************* * Fixed Crop Box * *************************************/ $('.fixed-crop-box').cropper({ viewMode: 1, dragMode: 'none', autoCropArea: 0.65, restore: false, cropBoxMovable: false, zoomOnWheel: false }); /****************************************** * Fixed Size Crop Box * ******************************************/ $('.fixed-size-crop-box').cropper({ viewMode: 1, dragMode: 'none', autoCropArea: 0.65, restore: false, cropBoxResizable: false, zoomOnWheel: false }); /************************************* * Disable Guides * *************************************/ $('.disable-guides').cropper({ viewMode: 1, autoCropArea: 0.65, guides: false, restore: false, zoomOnWheel: false }); /*********************************************** * Disable Center Indicator * ***********************************************/ $('.disable-center-indicator').cropper({ viewMode: 1, autoCropArea: 0.65, center: false, restore: false, zoomOnWheel: false }); /**************************************** * Disable Auto Crop * ****************************************/ $('.disable-auto-crop').cropper({ autoCrop: false, viewMode: 1, autoCropArea: 0.65, restore: false, zoomOnWheel: false }); /******************************************* * Disable New Crop Box * *******************************************/ $('.disable-new-crop-box').cropper({ dragMode: 'none', viewMode: 1, autoCropArea: 0.65, restore: false, zoomOnWheel: false }); /************************************ * Movable Image * ************************************/ $('.movable-image').cropper({ viewMode: 1, dragMode: 'move', autoCropArea: 0.65, restore: false, cropBoxMovable: false, cropBoxResizable: false, zoomOnWheel: false }); /************************************* * Zoomable Image * *************************************/ $('.zoomable-image').cropper({ viewMode: 1, dragMode: 'crop', autoCropArea: 0.65, restore: false, zoomable: true, zoomOnTouch: true, cropBoxMovable: false, cropBoxResizable: false }); /**************************************** * Minimum Crop Area * ****************************************/ $('.min-crop-area').cropper({ minCropBoxWidth: 100, minCropBoxHeight: 100, viewMode: 1, autoCropArea: 0.65, dragMode: 'crop', restore: false, zoomOnWheel: false }); /***************************************** * Disable Background * *****************************************/ $('.disable-background').cropper({ background: false, viewMode: 1, autoCropArea: 0.65, dragMode: 'crop', restore: false, zoomOnWheel: false }); /*********************************** * Rotate Image * ***********************************/ $('.rotate-image').cropper({ viewMode: 1, autoCropArea: 0.65, dragMode: 'crop', restore: false, zoomOnWheel: false, built: function () { $('.rotate-image').cropper('rotate', 45); } }); /********************************** * Scale Image * **********************************/ $('.scale-image').cropper({ viewMode: 1, autoCropArea: 0.65, dragMode: 'crop', restore: false, zoomOnWheel: false, built: function () { $('.scale-image').cropper('scale', -1); // Flip both horizontal and vertical } }); });