File: /home/crm/public_html/wwwroot/assets/pug/pages/theme/image-cropper.pug
- var theme_customizer = true;
- var tooltip = true;
- var image_cropper = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
// page-wrapper Start
#pageWrapper.page-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper.horizontal-menu
include ../../components/sidebar
.page-body
.container-fluid
.page-header
.row
.col-sm-6
h3
| Image Cropper
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Advance
li.breadcrumb-item.active Image Cropper
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.img-cropper
.row
.col-sm-12
.card
.card-header.pb-0
h5 Image Cropper
.card-body
.row
.col-xl-9.col-md-12
.img-container
img#image(src='../assets/images/other-images/img-cropper.jpg', alt='Picture')
.col-xl-3.col-md-12
// <h3>Preview:</h3>
.docs-preview.clearfix
// <div class="img-preview preview-lg"></div>
.img-preview.preview-md
.img-preview.preview-sm
.img-preview.preview-xs
// <h3>Data:</h3>
.docs-data
.input-group.input-group-sm
span.input-group-text X
input#dataX.form-control(type='text', placeholder='x')
span.input-group-text px
.input-group.input-group-sm
span.input-group-text Y
input#dataY.form-control(type='text', placeholder='y')
span.input-group-text px
.input-group.input-group-sm
span.input-group-text Width
input#dataWidth.form-control(type='text', placeholder='width')
span.input-group-text px
.input-group.input-group-sm
span.input-group-text Height
input#dataHeight.form-control(type='text', placeholder='height')
span.input-group-text px
.input-group.input-group-sm
span.input-group-text Rotate
input#dataRotate.form-control(type='text', placeholder='rotate')
span.input-group-text deg
.input-group.input-group-sm
span.input-group-text ScaleX
input#dataScaleX.form-control(type='text', placeholder='scaleX')
.input-group.input-group-sm
span.input-group-text ScaleY
input#dataScaleY.form-control(type='text', placeholder='scaleY')
.card
.card-body
.row
.col-xl-9.col-md-12.docs-buttons
.btn-group
button.btn.btn-primary(type='button', data-method='setDragMode', data-option='move', title='Move')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setDragMode", "move")')
span.fa.fa-arrows
button.btn.btn-primary(type='button', data-method='setDragMode', data-option='crop', title='Crop')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setDragMode", "crop")')
span.fa.fa-crop
.btn-group
button.btn.btn-primary(type='button', data-method='zoom', data-option='0.1', title='Zoom In')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("zoom", 0.1)')
span.fa.fa-search-plus
button.btn.btn-primary(type='button', data-method='zoom', data-option='-0.1', title='Zoom Out')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("zoom", -0.1)')
span.fa.fa-search-minus
.btn-group
button.btn.btn-outline-primary(type='button', data-method='move', data-option='-10', data-second-option='0', title='Move Left')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", -10, 0)')
span.fa.fa-arrow-left
button.btn.btn-outline-primary(type='button', data-method='move', data-option='10', data-second-option='0', title='Move Right')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", 10, 0)')
span.fa.fa-arrow-right
button.btn.btn-outline-primary(type='button', data-method='move', data-option='0', data-second-option='-10', title='Move Up')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", 0, -10)')
span.fa.fa-arrow-up
button.btn.btn-outline-primary(type='button', data-method='move', data-option='0', data-second-option='10', title='Move Down')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("move", 0, 10)')
span.fa.fa-arrow-down
.btn-group
button.btn.btn-outline-primary(type='button', data-method='rotate', data-option='-45', title='Rotate Left')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("rotate", -45)')
span.fa.fa-rotate-left
button.btn.btn-outline-primary(type='button', data-method='rotate', data-option='45', title='Rotate Right')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("rotate", 45)')
span.fa.fa-rotate-right
.btn-group
button.btn.btn-outline-primary(type='button', data-method='scaleX', data-option='-1', title='Flip Horizontal')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("scaleX", -1)')
span.fa.fa-arrows-h
button.btn.btn-outline-primary(type='button', data-method='scaleY', data-option='-1', title='Flip Vertical')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("scaleY", -1)')
span.fa.fa-arrows-v
.btn-group
button.btn.btn-outline-primary(type='button', data-method='crop', title='Crop')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("crop")')
span.fa.fa-check
button.btn.btn-outline-primary(type='button', data-method='clear', title='Clear')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("clear")')
span.fa.fa-remove
.btn-group
button.btn.btn-outline-primary(type='button', data-method='disable', title='Disable')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("disable")')
span.fa.fa-lock
button.btn.btn-outline-primary(type='button', data-method='enable', title='Enable')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("enable")')
span.fa.fa-unlock
.btn-group
button.btn.btn-outline-primary(type='button', data-method='reset', title='Reset')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("reset")')
span.fa.fa-refresh
label.btn.btn-outline-primary.btn-upload(for='inputImage', title='Upload image file')
input#inputImage.sr-only(type='file', name='file', accept='.jpg,.jpeg,.png,.gif,.bmp,.tiff')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='Import image with Blob URLs')
span.fa.fa-upload
button.btn.btn-outline-primary(type='button', data-method='destroy', title='Destroy')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("destroy")')
span.fa.fa-power-off
br
.btn-group.btn-group-crop
button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "maxWidth": 4096, "maxHeight": 4096 }')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { maxWidth: 4096, maxHeight: 4096 })')
| Get Cropped Canvas
button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "width": 160, "height": 90 }')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { width: 160, height: 90 })')
| 160×90
button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "width": 320, "height": 180 }')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { width: 320, height: 180 })')
| 320×180
// Show the cropped image in modal
#getCroppedCanvasModal.modal.fade.docs-cropped(aria-hidden='true', aria-labelledby='getCroppedCanvasTitle', role='dialog', tabindex='-1')
.modal-dialog
.modal-content
.modal-header
h5#getCroppedCanvasTitle.modal-title Cropped
button.close(type='button', data-dismiss='modal', aria-label='Close')
span(aria-hidden='true') ×
.modal-body
.modal-footer
button.btn.btn-primary(type='button', data-dismiss='modal') Close
a#download.btn.btn-outline-primary(href='javascript:void(0);', download='cropped.jpg') Download
// /.modal
button.btn.btn-primary(type='button', data-method='getData', data-option='', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getData")')
| Get Data
button.btn.btn-primary(type='button', data-method='setData', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setData", data)')
| Set Data
button.btn.btn-primary(type='button', data-method='getContainerData', data-option='', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getContainerData")')
| Get Container Data
button.btn.btn-primary(type='button', data-method='getImageData', data-option='', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getImageData")')
| Get Image Data
button.btn.btn-primary(type='button', data-method='getCanvasData', data-option='', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCanvasData")')
| Get Canvas Data
button.btn.btn-primary(type='button', data-method='setCanvasData', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setCanvasData", data)')
| Set Canvas Data
button.btn.btn-primary(type='button', data-method='getCropBoxData', data-option='', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("getCropBoxData")')
| Get Crop Box Data
button.btn.btn-primary(type='button', data-method='setCropBoxData', data-bs-target='#putData')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='$().cropper("setCropBoxData", data)')
| Set Crop Box Data
button.btn.btn-primary(type='button', data-method='moveTo', data-option='0')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='cropper.moveTo(0)')
| Move to [0,0]
button.btn.btn-primary(type='button', data-method='zoomTo', data-option='1')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='cropper.zoomTo(1)')
| Zoom to 100%
button.btn.btn-primary(type='button', data-method='rotateTo', data-option='180')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='cropper.rotateTo(180)')
| Rotate 180°
button.btn.btn-primary(type='button', data-method='scale', data-option='-2', data-second-option='-1')
span.docs-tooltip(data-bs-toggle='tooltip', title='cropper.scale(-2, -1)')
| Scale (-2, -1)
textarea#putData.form-control(rows='1', placeholder='Get data to here or set data with this value')
// /.docs-buttons
.col-xl-3.col-md-12.docs-toggles
// <h3>Toggles:</h3>
.btn-group.d-flex.flex-nowrap(data-bs-toggle='buttons')
label.btn.btn-primary.active
input#aspectRatio0.sr-only(type='radio', name='aspectRatio', value='1.7777777777777777')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 16 / 9')
| 16:9
label.btn.btn-outline-primary
input#aspectRatio1.sr-only(type='radio', name='aspectRatio', value='1.3333333333333333')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 4 / 3')
| 4:3
label.btn.btn-outline-primary
input#aspectRatio2.sr-only(type='radio', name='aspectRatio', value='1')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 1 / 1')
| 1:1
label.btn.btn-outline-primary
input#aspectRatio3.sr-only(type='radio', name='aspectRatio', value='0.6666666666666666')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: 2 / 3')
| 2:3
label.btn.btn-outline-primary
input#aspectRatio4.sr-only(type='radio', name='aspectRatio', value='NaN')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='aspectRatio: NaN')
| Free
.btn-group.d-flex.flex-nowrap(data-bs-toggle='buttons')
label.btn.btn-primary.active
input#viewMode0.sr-only(type='radio', name='viewMode', value='0', checked='')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 0')
| VM0
label.btn.btn-outline-primary
input#viewMode1.sr-only(type='radio', name='viewMode', value='1')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 1')
| VM1
label.btn.btn-outline-primary
input#viewMode2.sr-only(type='radio', name='viewMode', value='2')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 2')
| VM2
label.btn.btn-outline-primary
input#viewMode3.sr-only(type='radio', name='viewMode', value='3')
span.docs-tooltip(data-bs-toggle='tooltip', data-animation='false', title='View Mode 3')
| VM3
.dropdown.dropup.docs-options.mb-0
button#toggleOptions.btn.btn-primary.btn-block.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='true')
| Toggle Options
span.caret
ul.dropdown-menu(aria-labelledby='toggleOptions', role='menu')
li.dropdown-item
.form-check
input#responsive.form-check-input(type='checkbox', name='responsive', checked='')
label.form-check-label(for='responsive') responsive
li.dropdown-item
.form-check
input#restore.form-check-input(type='checkbox', name='restore', checked='')
label.form-check-label(for='restore') restore
li.dropdown-item
.form-check
input#checkCrossOrigin.form-check-input(type='checkbox', name='checkCrossOrigin', checked='')
label.form-check-label(for='checkCrossOrigin') checkCrossOrigin
li.dropdown-item
.form-check
input#checkOrientation.form-check-input(type='checkbox', name='checkOrientation', checked='')
label.form-check-label(for='checkOrientation') checkOrientation
li.dropdown-item
.form-check
input#modal.form-check-input(type='checkbox', name='modal', checked='')
label.form-check-label(for='modal') modal
li.dropdown-item
.form-check
input#guides.form-check-input(type='checkbox', name='guides', checked='')
label.form-check-label(for='guides') guides
li.dropdown-item
.form-check
input#center.form-check-input(type='checkbox', name='center', checked='')
label.form-check-label(for='center') center
li.dropdown-item
.form-check
input#highlight.form-check-input(type='checkbox', name='highlight', checked='')
label.form-check-label(for='highlight') highlight
li.dropdown-item
.form-check
input#background.form-check-input(type='checkbox', name='background', checked='')
label.form-check-label(for='background') background
li.dropdown-item
.form-check
input#autoCrop.form-check-input(type='checkbox', name='autoCrop', checked='')
label.form-check-label(for='autoCrop') autoCrop
li.dropdown-item
.form-check
input#movable.form-check-input(type='checkbox', name='movable', checked='')
label.form-check-label(for='movable') movable
li.dropdown-item
.form-check
input#rotatable.form-check-input(type='checkbox', name='rotatable', checked='')
label.form-check-label(for='rotatable') rotatable
li.dropdown-item
.form-check
input#scalable.form-check-input(type='checkbox', name='scalable', checked='')
label.form-check-label(for='scalable') scalable
li.dropdown-item
.form-check
input#zoomable.form-check-input(type='checkbox', name='zoomable', checked='')
label.form-check-label(for='zoomable') zoomable
li.dropdown-item
.form-check
input#zoomOnTouch.form-check-input(type='checkbox', name='zoomOnTouch', checked='')
label.form-check-label(for='zoomOnTouch') zoomOnTouch
li.dropdown-item
.form-check
input#zoomOnWheel.form-check-input(type='checkbox', name='zoomOnWheel', checked='')
label.form-check-label(for='zoomOnWheel') zoomOnWheel
li.dropdown-item
.form-check
input#cropBoxMovable.form-check-input(type='checkbox', name='cropBoxMovable', checked='')
label.form-check-label(for='cropBoxMovable') cropBoxMovable
li.dropdown-item
.form-check
input#cropBoxResizable.form-check-input(type='checkbox', name='cropBoxResizable', checked='')
label.form-check-label(for='cropBoxResizable') cropBoxResizable
li.dropdown-item
.form-check
input#toggleDragModeOnDblclick.form-check-input(type='checkbox', name='toggleDragModeOnDblclick', checked='')
label.form-check-label(for='toggleDragModeOnDblclick') toggleDragModeOnDblclick
// /.dropdown
// /.docs-toggles
.row
.col-md-6
.card
.card-header.pb-0
h5 Disabled Zoom
.card-body
.img-container
img.crop-zoomable.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
.col-md-6
.card
.card-header.pb-0
h5 Autocrop Disable
.card-body
.img-container
img.crop-auto.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
.col-md-6
.card
.card-header.pb-0
h5 Disabled Image Drag
.card-body
.img-container
img.crop-drag.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
.col-md-6
.card
.card-header.pb-0
h5 Minimum Zone Size
.card-body
.img-container
img.crop-min.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files