- 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 //

Preview:

.docs-preview.clearfix //
.img-preview.preview-md .img-preview.preview-sm .img-preview.preview-xs //

Data:

.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 //

Toggles:

.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