Image Cropper
- Robotech
- /
- Forms
- /
- Cropper
Default badge
X
px
Y
px
Width
px
Height
px
Rotate
deg
ScaleX
ScaleY
<!-- Css -->
<link rel="stylesheet" href="assets/libs/cropperjs/cropper.min.css">
<!-- JS -->
<script src="assets/libs/cropperjs/cropper.min.js"></script>
<script src="assets/js/pages/crop.init.js"></script>
<div class="docs-demo">
<div class="img-container mb-0">
<img id="image" src="assets/images/widgets/img-5.jpg" alt="Picture">
</div>
</div>
<div id="actions">
<div class="bg-white dark:bg-slate-800 shadow rounded-md w-full relative docs-buttons">
<div class="flex-auto p-4">
<!-- <h3>Toolbar:</h3> -->
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="setDragMode" data-option="move" title="Move">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setDragMode", "move")">
<span class="fas fa-expand-arrows-alt"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="setDragMode" data-option="crop" title="Crop">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setDragMode", "crop")">
<span class="fas fa-crop"></span>
</span>
</button>
</div>
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="zoom" data-option="0.1" title="Zoom In">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("zoom", 0.1)">
<span class="fas fa-search-plus"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="zoom" data-option="-0.1" title="Zoom Out">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("zoom", -0.1)">
<span class="fas fa-search-minus"></span>
</span>
</button>
</div>
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", -10, 0)">
<span class="fas fa-arrow-left"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="move" data-option="10" data-second-option="0" title="Move Right">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", 10, 0)">
<span class="fas fa-arrow-right"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, -10)">
<span class="fas fa-arrow-up"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="move" data-option="0" data-second-option="10" title="Move Down">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, 10)">
<span class="fa fa-arrow-down"></span>
</span>
</button>
</div>
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="rotate" data-option="-45" title="Rotate Left">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("rotate", -45)">
<span class="fas fa-reply"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="rotate" data-option="45" title="Rotate Right">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("rotate", 45)">
<span class="fas fa-share"></span>
</span>
</button>
</div>
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="scaleX" data-option="-1" title="Flip Horizontal">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("scaleX", -1)">
<span class="fa fa-arrows-alt-h"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="scaleY" data-option="-1" title="Flip Vertical">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("scaleY", -1)">
<span class="fas fa-arrows-alt-v"></span>
</span>
</button>
</div>
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="crop" title="Crop">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("crop")">
<span class="fas fa-check"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="clear" title="Clear">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("clear")">
<span class="fas fa-times"></span>
</span>
</button>
</div>
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="disable" title="Disable">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("disable")">
<span class="fas fa-lock"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="enable" title="Enable">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("enable")">
<span class="fas fa-unlock"></span>
</span>
</button>
</div>
<div class="inline-flex relative mb-2 mr-1">
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="reset" title="Reset">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("reset")">
<span class="fas fa-redo"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded btn-upload" title="Upload image file">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
<span class="fas fa-upload"></span>
</span>
</button>
<button type="button" class="btn hover:text-black
text-indigo-700 hover:bg-opacity-50 bg-gray-100 dark:bg-slate-700 dark:text-slate-300 text-sm
font-medium py-2 px-4 rounded" data-method="destroy" title="Destroy">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("destroy")">
<span class="fas fa-power-off"></span>
</span>
</button>
</div>
<div class="inline-flex relative relative-crop mb-2 mr-1">
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCroppedCanvas", { width: 160, height: 90 })">
160×90
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCroppedCanvas", { width: 320, height: 180 })">
320×180
</span>
</button>
</div>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="getData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getData")">
Get Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="setData" data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setData", data)">
Set Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="getContainerData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getContainerData")">
Get Container Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="getImageData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getImageData")">
Get Image Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="getCanvasData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCanvasData")">
Get Canvas Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="setCanvasData" data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setCanvasData", data)">
Set Canvas Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="getCropBoxData" data-option data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("getCropBoxData")">
Get Crop Box Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="setCropBoxData" data-target="#putData">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="$().cropper("setCropBoxData", data)">
Set Crop Box Data
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="moveTo" data-option="0">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="cropper.moveTo(0)">
Move to [0,0]
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="zoomTo" data-option="1">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="cropper.zoomTo(1)">
Zoom to 100%
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="rotateTo" data-option="180">
<span class="docs-tooltip" data-bs-toggle="tooltip" data-animation="false" title="cropper.rotateTo(180)">
Rotate 180°
</span>
</button>
<button type="button" class="btn px-3 py-2 lg:px-4 bg-brand-500 text-white text-sm font-semibold rounded hover:bg-brand-600 mb-2 mr-1" data-method="scale" data-option="-2" data-second-option="-1">
<span class="docs-tooltip" data-bs-toggle="tooltip" title="cropper.scale(-2, -1)">
Scale (-2, -1)
</span>
</button>
<textarea class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-brand-500 dark:focus:border-brand-500 dark:hover:border-slate-700" id="putData" rows="3" placeholder="Get data to here or set data with this value"></textarea>
</div><!--end card-body-->
</div><!--end card-->
</div>
<div class="mt-5">
<div class="docs-preview clear-both">
<div class="img-preview preview-lg"></div>
<div class="img-preview preview-md"></div>
<div class="img-preview preview-sm"></div>
<div class="img-preview preview-xs"></div>
</div>
<!-- <h3>Data:</h3> -->
<div class="docs-data">
<div class="flex mb-3">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-l-md border border-r-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
X
</div>
<input type="text" id="dataX" placeholder="x" class="rounded-none focus-visible:outline-none bg-gray-50 border text-gray-900 focus:ring-1 focus:ring-brand-500 focus:border-brand-500 block flex-1 min-w-0 w-full text-sm border-gray-200 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-brand-500 dark:focus:border-brand-500">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-r-md border border-l-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
px
</div>
</div>
<div class="flex mb-3">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-l-md border border-r-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
Y
</div>
<input type="text" id="dataY" placeholder="y" class="rounded-none focus-visible:outline-none bg-gray-50 border text-gray-900 focus:ring-brand-500 focus:border-brand-500 block flex-1 min-w-0 w-full text-sm border-gray-200 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-brand-500 dark:focus:border-brand-500">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-r-md border border-l-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
px
</div>
</div>
<div class="flex mb-3">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-l-md border border-r-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
Width
</div>
<input type="text" id="dataWidth" placeholder="width" class="rounded-none focus-visible:outline-none bg-gray-50 border text-gray-900 focus:ring-brand-500 focus:border-brand-500 block flex-1 min-w-0 w-full text-sm border-gray-200 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-brand-500 dark:focus:border-brand-500">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-r-md border border-l-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
px
</div>
</div>
<div class="flex mb-3">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-l-md border border-r-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
Height
</div>
<input type="text" id="dataHeight" placeholder="height" class="rounded-none focus-visible:outline-none bg-gray-50 border text-gray-900 focus:ring-brand-500 focus:border-brand-500 block flex-1 min-w-0 w-full text-sm border-gray-200 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-brand-500 dark:focus:border-brand-500">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-r-md border border-l-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
px
</div>
</div>
<div class="flex mb-3">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-l-md border border-r-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
Rotate
</div>
<input type="text" id="dataRotate" placeholder="rotate" class="rounded-none focus-visible:outline-none bg-gray-50 border text-gray-900 focus:ring-brand-500 focus:border-brand-500 block flex-1 min-w-0 w-full text-sm border-gray-200 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-brand-500 dark:focus:border-brand-500">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-r-md border border-l-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
deg
</div>
</div>
<div class="flex mb-3">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-l-md border border-r-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
ScaleX
</div>
<input type="text" id="dataScaleX" placeholder="ScaleX" class="rounded-none focus-visible:outline-none bg-gray-50 border text-gray-900 focus:ring-brand-500 focus:border-brand-500 block flex-1 min-w-0 w-full text-sm border-gray-200 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-brand-500 dark:focus:border-brand-500">
</div>
<div class="flex">
<div class="inline-flex items-center px-3 text-sm text-slate-100 bg-brand-500 rounded-l-md border border-r-0 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
ScaleY
</div>
<input type="text" id="dataScaleY" placeholder="ScaleY" class="rounded-none focus-visible:outline-none bg-gray-50 border text-gray-900 focus:ring-brand-500 focus:border-brand-500 block flex-1 min-w-0 w-full text-sm border-gray-200 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-brand-500 dark:focus:border-brand-500">
</div>
</div>
</div>
<div class="mt-5 docs-toggles">
<div class="btn-group flex flex-nowrap" data-toggle="buttons">
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1 active">
<input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 16 / 9">
16:9
</span>
</label>
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1">
<input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 4 / 3">
4:3
</span>
</label>
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1">
<input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 1 / 1">
1:1
</span>
</label>
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1">
<input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: 2 / 3">
2:3
</span>
</label>
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1">
<input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="aspectRatio: NaN">
Free
</span>
</label>
</div>
<div class="btn-group flex flex-nowrap" data-toggle="buttons">
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1 active">
<input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" checked>
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="View Mode 0">
VM0
</span>
</label>
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1">
<input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="View Mode 1">
VM1
</span>
</label>
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1">
<input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="View Mode 2">
VM2
</span>
</label>
<label class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded mb-1 mr-1">
<input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3">
<span class="docs-tooltip dark:text-slate-400" data-bs-toggle="tooltip" data-animation="false" title="View Mode 3">
VM3
</span>
</label>
</div>
<div class="dropdown dropup docs-options mt-3">
<button id="toggleOptions" data-fc-autoclose="both" data-fc-type="dropdown" data-fc-placement="top" class="dropdown-toggle text-white bg-brand-500 hover:bg-brand-600 focus:outline-none font-medium rounded text-sm px-3 py-2 text-center inline-flex items-center" type="button">
Toggle Options
<i class="fas fa-chevron-down text-xs ml-2"></i>
</button>
<div class="hidden z-10 w-56 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200 p-3" aria-labelledby="toggleOptions" role="menu">
<li class="">
<input class="" id="responsive" type="checkbox" name="responsive" checked>
<label class="" for="responsive">responsive</label>
</li>
<li class="">
<div class="form-check">
<input class="" id="restore" type="checkbox" name="restore" checked>
<label class="" for="restore">restore</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="checkCrossOrigin" type="checkbox" name="checkCrossOrigin" checked>
<label class="" for="checkCrossOrigin">checkCrossOrigin</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="checkOrientation" type="checkbox" name="checkOrientation" checked>
<label class="" for="checkOrientation">checkOrientation</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="modal" type="checkbox" name="modal" checked>
<label class="" for="modal">modal</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="guides" type="checkbox" name="guides" checked>
<label class="" for="guides">guides</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="center" type="checkbox" name="center" checked>
<label class="" for="center">center</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="highlight" type="checkbox" name="highlight" checked>
<label class="" for="highlight">highlight</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="background" type="checkbox" name="background" checked>
<label class="" for="background">background</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="autoCrop" type="checkbox" name="autoCrop" checked>
<label class="" for="autoCrop">autoCrop</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="movable" type="checkbox" name="movable" checked>
<label class="" for="movable">movable</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="rotatable" type="checkbox" name="rotatable" checked>
<label class="" for="rotatable">rotatable</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="scalable" type="checkbox" name="scalable" checked>
<label class="" for="scalable">scalable</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="zoomable" type="checkbox" name="zoomable" checked>
<label class="" for="zoomable">zoomable</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="zoomOnTouch" type="checkbox" name="zoomOnTouch" checked>
<label class="" for="zoomOnTouch">zoomOnTouch</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="zoomOnWheel" type="checkbox" name="zoomOnWheel" checked>
<label class="" for="zoomOnWheel">zoomOnWheel</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="cropBoxMovable" type="checkbox" name="cropBoxMovable" checked>
<label class="" for="cropBoxMovable">cropBoxMovable</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="cropBoxResizable" type="checkbox" name="cropBoxResizable" checked>
<label class="" for="cropBoxResizable">cropBoxResizable</label>
</div>
</li>
<li class="">
<div class="form-check">
<input class="" id="toggleDragModeOnDblclick" type="checkbox" name="toggleDragModeOnDblclick" checked>
<label class="" for="toggleDragModeOnDblclick">toggleDragModeOnDblclick</label>
</div>
</li>
</ul>
</div>
</div><!-- /.dropdown -->
</div>