<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>
{
  "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\"/>"
}

Image Cropper

An Image Cropper allows a user to edit an image that they’ve uploaded by rotating, panning, and zooming it.