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

Image Cropper

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