<!-- Default -->
<div class="image-cropper">
<div class="image-cropper__dropzone-wrapper">
<div class="
dropzone
dropzone-small
dropzone-circular">
<div class="dropzone__icons">
<?xml version="1.0" encoding="utf-8"?>
<svg class='' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="56px" viewBox="0 0 56 56" enable-background="new 0 0 56 56" xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M26.8333 27.834C26.8333 27.2817 27.281 26.834 27.8333 26.834H53.8333C54.3855 26.834 54.8333 27.2817 54.8333 27.834V53.834C54.8333 54.3863 54.3855 54.834 53.8333 54.834H27.8333C27.281 54.834 26.8333 54.3863 26.8333 53.834V27.834Z" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M36.4583 39.667C38.3913 39.667 39.9583 38.1 39.9583 36.167C39.9583 34.234 38.3913 32.667 36.4583 32.667C34.5253 32.667 32.9583 34.234 32.9583 36.167C32.9583 38.1 34.5253 39.667 36.4583 39.667Z" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M54.8333 49.5843L49.2543 41.2147C48.9337 40.7332 48.3958 40.4412 47.8174 40.4347C47.2389 40.4281 46.6947 40.7079 46.3633 41.182L41.6966 47.8343L38.8126 45.5267C38.4292 45.2207 37.935 45.0895 37.4503 45.1649C36.9656 45.2403 36.5346 45.5154 36.2623 45.9233L30.3333 54.8343" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M17.4999 21.0003C22.9767 21.0003 27.4166 16.5605 27.4166 11.0837C27.4166 5.60683 22.9767 1.16699 17.4999 1.16699C12.0231 1.16699 7.58325 5.60683 7.58325 11.0837C7.58325 16.5605 12.0231 21.0003 17.4999 21.0003Z" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M19.8333 24.6658C15.1433 23.9928 10.392 25.3881 6.8106 28.4901C3.22916 31.592 1.16999 36.0955 1.16663 40.8335H19.8333" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<button class="btn btn-simple btn-small dropzone__btn " type="button">
<span class="btn__inner">
<span class="btn__text">Add Image</span>
</span>
</button>
</div>
</div>
<div class="image-cropper__controls-row">
<button class="btn btn-secondary image-cropper__rotate-btn " type="button" disabled>
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="16px"
height="16px"
viewBox="0 0 16 16"
enable-background="new 0 0 16 16"
xml:space="preserve">
<path fill="none" d="M2.28931 7.02463C2.38311 6.73282 2.49969 6.44884 2.63797 6.17529" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M2.046 9.61643C2.01516 9.36874 1.9998 9.11937 2 8.86977C2 8.67554 2.00911 8.48377 2.02734 8.29443" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M2.92601 12.0738C2.6988 11.7145 2.51041 11.3322 2.36401 10.9331" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M4.77524 13.9333C4.41301 13.7032 4.07643 13.435 3.77124 13.1333" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M7.32003 14.8318C6.8866 14.7827 6.45984 14.6863 6.04736 14.5444" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M6.66675 2.83301H8.00008C11.1886 2.84234 13.8166 5.33644 13.9926 8.52009C14.1686 11.7037 11.8315 14.4723 8.66341 14.833" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9.00008 1.1665L6.66675 2.83317L9.00008 4.49984" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="btn__text">Rotate Left</span>
</span>
</button>
<button class="btn btn-secondary image-cropper__rotate-btn " type="button" disabled>
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="16px"
height="16px"
viewBox="0 0 16 16"
enable-background="new 0 0 16 16"
xml:space="preserve">
<path fill="none" d="M13.7105 7.02463C13.6167 6.73282 13.5001 6.44884 13.3618 6.17529" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M13.9539 9.61643C13.9847 9.36874 14.0001 9.11937 13.9999 8.86977C13.9999 8.67554 13.9907 8.48377 13.9725 8.29443" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M13.074 12.0736C13.3013 11.714 13.4897 11.3312 13.636 10.9316" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11.2246 13.9333C11.5868 13.7032 11.9234 13.435 12.2286 13.1333" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M8.67993 14.8318C9.11336 14.7827 9.54012 14.6863 9.9526 14.5444" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9.33324 2.83301H7.99991C4.81141 2.84234 2.18335 5.33644 2.00736 8.52009C1.83138 11.7037 4.16853 14.4723 7.33657 14.833" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M7 1.1665L9.33333 2.83317L7 4.49984" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="btn__text">Rotate Right</span>
</span>
</button>
</div>
<div class="image-cropper__controls-row">
<div class="slider-wrapper">
<div class="text-input__pre">
<label class="text-input__label" for="">Scale</label>
<span class="text-input__post-label">100%</span>
</div> <input type="range" class="slider" id="" name="" min="" max="" value="" step="" style="--min: 0; --max: 100; --val: 50;">
</div>
</div>
<div class="image-cropper__controls-row">
<button class="btn btn-primary btn-full-width " type="button" disabled>
<span class="btn__inner">
<span class="btn__text">Save</span>
</span>
</button>
</div>
</div>
<!-- Rectangle -->
<div class="image-cropper">
<div class="image-cropper__dropzone-wrapper">
<div class="
dropzone
dropzone-small
">
<div class="dropzone__icons">
<?xml version="1.0" encoding="utf-8"?>
<svg class='' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="56px" viewBox="0 0 56 56" enable-background="new 0 0 56 56" xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M8.60767 4.66699C7.6399 4.66746 6.77287 5.26529 6.42834 6.16966L2.73934 15.8483C2.34388 16.8873 2.3323 18.0333 2.70667 19.08C3.76111 22.0151 6.77272 23.7676 9.84557 23.2342C12.9184 22.7008 15.1632 20.0358 15.1667 16.917C15.1667 20.4608 18.0395 23.3337 21.5833 23.3337C25.1272 23.3337 28 20.4608 28 16.917C28 20.4608 30.8728 23.3337 34.4167 23.3337C37.9605 23.3337 40.8333 20.4608 40.8333 16.917C40.8368 20.0358 43.0816 22.7008 46.1544 23.2342C49.2273 23.7676 52.2389 22.0151 53.2933 19.08C53.6682 18.0332 53.6558 16.8868 53.2583 15.8483L49.5717 6.16966C49.2271 5.26529 48.3601 4.66746 47.3923 4.66699L8.60767 4.66699Z" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.5663 30.834C11.5663 30.5578 11.7901 30.334 12.0663 30.334H27.3996C27.6758 30.334 27.8996 30.5578 27.8996 30.834V43.834C27.8996 44.1101 27.6758 44.334 27.3996 44.334H12.0663C11.7901 44.334 11.5663 44.1101 11.5663 43.834V30.834Z" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M32.5663 51.334V31.5007C32.5663 30.8563 33.0886 30.334 33.733 30.334H43.0663C43.7106 30.334 44.233 30.8563 44.233 31.5007V51.334" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M48.8997 23.1185V48.9998C48.8997 50.2885 47.855 51.3332 46.5663 51.3332H9.23299C7.94433 51.3332 6.89966 50.2885 6.89966 48.9998V23.0625" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<button class="btn btn-simple btn-small dropzone__btn " type="button">
<span class="btn__inner">
<span class="btn__text">Add Image</span>
</span>
</button>
<p class="dropzone__text">or drop files to upload</p>
</div>
</div>
<div class="image-cropper__controls-row">
<button class="btn btn-secondary image-cropper__rotate-btn " type="button" disabled>
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="16px"
height="16px"
viewBox="0 0 16 16"
enable-background="new 0 0 16 16"
xml:space="preserve">
<path fill="none" d="M2.28931 7.02463C2.38311 6.73282 2.49969 6.44884 2.63797 6.17529" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M2.046 9.61643C2.01516 9.36874 1.9998 9.11937 2 8.86977C2 8.67554 2.00911 8.48377 2.02734 8.29443" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M2.92601 12.0738C2.6988 11.7145 2.51041 11.3322 2.36401 10.9331" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M4.77524 13.9333C4.41301 13.7032 4.07643 13.435 3.77124 13.1333" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M7.32003 14.8318C6.8866 14.7827 6.45984 14.6863 6.04736 14.5444" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M6.66675 2.83301H8.00008C11.1886 2.84234 13.8166 5.33644 13.9926 8.52009C14.1686 11.7037 11.8315 14.4723 8.66341 14.833" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9.00008 1.1665L6.66675 2.83317L9.00008 4.49984" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="btn__text">Rotate Left</span>
</span>
</button>
<button class="btn btn-secondary image-cropper__rotate-btn " type="button" disabled>
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="16px"
height="16px"
viewBox="0 0 16 16"
enable-background="new 0 0 16 16"
xml:space="preserve">
<path fill="none" d="M13.7105 7.02463C13.6167 6.73282 13.5001 6.44884 13.3618 6.17529" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M13.9539 9.61643C13.9847 9.36874 14.0001 9.11937 13.9999 8.86977C13.9999 8.67554 13.9907 8.48377 13.9725 8.29443" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M13.074 12.0736C13.3013 11.714 13.4897 11.3312 13.636 10.9316" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11.2246 13.9333C11.5868 13.7032 11.9234 13.435 12.2286 13.1333" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M8.67993 14.8318C9.11336 14.7827 9.54012 14.6863 9.9526 14.5444" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9.33324 2.83301H7.99991C4.81141 2.84234 2.18335 5.33644 2.00736 8.52009C1.83138 11.7037 4.16853 14.4723 7.33657 14.833" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M7 1.1665L9.33333 2.83317L7 4.49984" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="btn__text">Rotate Right</span>
</span>
</button>
</div>
<div class="image-cropper__controls-row">
<div class="slider-wrapper">
<div class="text-input__pre">
<label class="text-input__label" for="">Scale</label>
<span class="text-input__post-label">100%</span>
</div> <input type="range" class="slider" id="" name="" min="" max="" value="" step="" style="--min: 0; --max: 100; --val: 50;">
</div>
</div>
<div class="image-cropper__controls-row">
<button class="btn btn-primary btn-full-width " type="button" disabled>
<span class="btn__inner">
<span class="btn__text">Save</span>
</span>
</button>
</div>
</div>
<div class="image-cropper">
<div class="image-cropper__dropzone-wrapper">
{{> @dropzone }}
</div>
<div class="image-cropper__controls-row">
{{> @button className="btn-secondary image-cropper__rotate-btn" icon='<path fill="none" d="M2.28931 7.02463C2.38311 6.73282 2.49969 6.44884 2.63797 6.17529" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M2.046 9.61643C2.01516 9.36874 1.9998 9.11937 2 8.86977C2 8.67554 2.00911 8.48377 2.02734 8.29443" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M2.92601 12.0738C2.6988 11.7145 2.51041 11.3322 2.36401 10.9331" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M4.77524 13.9333C4.41301 13.7032 4.07643 13.435 3.77124 13.1333" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M7.32003 14.8318C6.8866 14.7827 6.45984 14.6863 6.04736 14.5444" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M6.66675 2.83301H8.00008C11.1886 2.84234 13.8166 5.33644 13.9926 8.52009C14.1686 11.7037 11.8315 14.4723 8.66341 14.833" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9.00008 1.1665L6.66675 2.83317L9.00008 4.49984" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>' width="16" height="16" text="Rotate Left" disabled=true}}
{{> @button className="btn-secondary image-cropper__rotate-btn" icon='<path fill="none" d="M13.7105 7.02463C13.6167 6.73282 13.5001 6.44884 13.3618 6.17529" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M13.9539 9.61643C13.9847 9.36874 14.0001 9.11937 13.9999 8.86977C13.9999 8.67554 13.9907 8.48377 13.9725 8.29443" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M13.074 12.0736C13.3013 11.714 13.4897 11.3312 13.636 10.9316" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11.2246 13.9333C11.5868 13.7032 11.9234 13.435 12.2286 13.1333" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M8.67993 14.8318C9.11336 14.7827 9.54012 14.6863 9.9526 14.5444" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9.33324 2.83301H7.99991C4.81141 2.84234 2.18335 5.33644 2.00736 8.52009C1.83138 11.7037 4.16853 14.4723 7.33657 14.833" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M7 1.1665L9.33333 2.83317L7 4.49984" stroke="#737780" stroke-linecap="round" stroke-linejoin="round"/>' width="16" height="16" text="Rotate Right" disabled=true}}
</div>
<div class="image-cropper__controls-row">
{{> @slider label="Scale" postLabel="100%"}}
</div>
<div class="image-cropper__controls-row">
{{> @button className="btn-primary btn-full-width" disabled=true text="Save"}}
</div>
</div>
/* Default */
{
"uploadBtnText": "Add Image",
"isSmall": true,
"isCircular": true,
"defaultIcon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M26.8333 27.834C26.8333 27.2817 27.281 26.834 27.8333 26.834H53.8333C54.3855 26.834 54.8333 27.2817 54.8333 27.834V53.834C54.8333 54.3863 54.3855 54.834 53.8333 54.834H27.8333C27.281 54.834 26.8333 54.3863 26.8333 53.834V27.834Z\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M36.4583 39.667C38.3913 39.667 39.9583 38.1 39.9583 36.167C39.9583 34.234 38.3913 32.667 36.4583 32.667C34.5253 32.667 32.9583 34.234 32.9583 36.167C32.9583 38.1 34.5253 39.667 36.4583 39.667Z\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M54.8333 49.5843L49.2543 41.2147C48.9337 40.7332 48.3958 40.4412 47.8174 40.4347C47.2389 40.4281 46.6947 40.7079 46.3633 41.182L41.6966 47.8343L38.8126 45.5267C38.4292 45.2207 37.935 45.0895 37.4503 45.1649C36.9656 45.2403 36.5346 45.5154 36.2623 45.9233L30.3333 54.8343\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.4999 21.0003C22.9767 21.0003 27.4166 16.5605 27.4166 11.0837C27.4166 5.60683 22.9767 1.16699 17.4999 1.16699C12.0231 1.16699 7.58325 5.60683 7.58325 11.0837C7.58325 16.5605 12.0231 21.0003 17.4999 21.0003Z\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M19.8333 24.6658C15.1433 23.9928 10.392 25.3881 6.8106 28.4901C3.22916 31.592 1.16999 36.0955 1.16663 40.8335H19.8333\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
/* Rectangle */
{
"uploadBtnText": "Add Image",
"isSmall": true,
"isCircular": null,
"defaultIcon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.60767 4.66699C7.6399 4.66746 6.77287 5.26529 6.42834 6.16966L2.73934 15.8483C2.34388 16.8873 2.3323 18.0333 2.70667 19.08C3.76111 22.0151 6.77272 23.7676 9.84557 23.2342C12.9184 22.7008 15.1632 20.0358 15.1667 16.917C15.1667 20.4608 18.0395 23.3337 21.5833 23.3337C25.1272 23.3337 28 20.4608 28 16.917C28 20.4608 30.8728 23.3337 34.4167 23.3337C37.9605 23.3337 40.8333 20.4608 40.8333 16.917C40.8368 20.0358 43.0816 22.7008 46.1544 23.2342C49.2273 23.7676 52.2389 22.0151 53.2933 19.08C53.6682 18.0332 53.6558 16.8868 53.2583 15.8483L49.5717 6.16966C49.2271 5.26529 48.3601 4.66746 47.3923 4.66699L8.60767 4.66699Z\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.5663 30.834C11.5663 30.5578 11.7901 30.334 12.0663 30.334H27.3996C27.6758 30.334 27.8996 30.5578 27.8996 30.834V43.834C27.8996 44.1101 27.6758 44.334 27.3996 44.334H12.0663C11.7901 44.334 11.5663 44.1101 11.5663 43.834V30.834Z\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M32.5663 51.334V31.5007C32.5663 30.8563 33.0886 30.334 33.733 30.334H43.0663C43.7106 30.334 44.233 30.8563 44.233 31.5007V51.334\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M48.8997 23.1185V48.9998C48.8997 50.2885 47.855 51.3332 46.5663 51.3332H9.23299C7.94433 51.3332 6.89966 50.2885 6.89966 48.9998V23.0625\" stroke=\"#737780\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
An Image Cropper allows a user to edit an image that they’ve uploaded by rotating, panning, and zooming it.