371 lines
26 KiB
Plaintext
371 lines
26 KiB
Plaintext
- var theme_customizer = true;
|
||
- var image_cropper = true;
|
||
- var sidebar = true;
|
||
- var slick = true;
|
||
- var header_slider = true;
|
||
- var animate = true;
|
||
- var scrollbar = true;
|
||
doctype html
|
||
html(lang='en')
|
||
include ../../components/header-files
|
||
body
|
||
include ../../components/loader
|
||
include ../../components/taptop
|
||
// page-wrapper Start
|
||
#pageWrapper.page-wrapper.compact-wrapper
|
||
include ../../components/header
|
||
// Page Body Start
|
||
.page-body-wrapper
|
||
include ../../components/sidebar
|
||
.page-body
|
||
.container-fluid
|
||
.page-title
|
||
.row
|
||
.col-6
|
||
h3
|
||
| Image Cropper
|
||
|
||
.col-6
|
||
ol.breadcrumb
|
||
li.breadcrumb-item
|
||
a(href='index.html')
|
||
svg.stroke-icon
|
||
use(href='../assets/svg/icon-sprite.svg#stroke-home')
|
||
li.breadcrumb-item Bonus Ui
|
||
li.breadcrumb-item.active Image Cropper
|
||
// Container-fluid starts
|
||
.container-fluid
|
||
.img-cropper
|
||
.row
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
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(for='dataX') X
|
||
input#dataX.form-control(type='text', placeholder='x')
|
||
span.input-group-text px
|
||
.input-group.input-group-sm
|
||
span.input-group-text(for='dataY') Y
|
||
input#dataY.form-control(type='text', placeholder='y')
|
||
span.input-group-text px
|
||
.input-group.input-group-sm
|
||
span.input-group-text(for='dataWidth') Width
|
||
input#dataWidth.form-control(type='text', placeholder='width')
|
||
span.input-group-text px
|
||
.input-group.input-group-sm
|
||
span.input-group-text(for='dataHeight') Height
|
||
input#dataHeight.form-control(type='text', placeholder='height')
|
||
span.input-group-text px
|
||
.input-group.input-group-sm
|
||
span.input-group-text(for='dataRotate') Rotate
|
||
input#dataRotate.form-control(type='text', placeholder='rotate')
|
||
span.input-group-text deg
|
||
.input-group.input-group-sm
|
||
span.input-group-text(for='dataScaleX') ScaleX
|
||
input#dataScaleX.form-control(type='text', placeholder='scaleX')
|
||
.input-group.input-group-sm
|
||
span.input-group-text(for='dataScaleY') ScaleY
|
||
input#dataScaleY.form-control(type='text', placeholder='scaleY')
|
||
.card
|
||
.card-body
|
||
.row.g-2
|
||
.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
|
||
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
|
||
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
|
||
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
|
||
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
|