Cropper JS

by meeky333

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.js"></script>
<div class="container" style="position: relative;">
	<form action="" method="post">
		<input type="hidden" name="slice" value="1" />
		<input type="hidden" name="scale" value="" />
		<input type="hidden" name="sliceX" value="" />
		<input type="hidden" name="sliceY" value="" />
		<input type="hidden" name="sliceW" value="" />
		<input type="hidden" name="sliceH" value="" />

		<div class="clearfix" style="position:relative">
			<div class="picture-frame hidden" data-width="170" data-height="170">
				<img id="crop-image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" width="1000" height="728" original-width="1280" original-height="720"/>
			</div>
      
			<p class="text-center">Zoom: <span id="adoptedZoom"></span></p>
		</div>
    
		<div class="row">
			<div class="col-sm-12 form-output">
				<div>
          Width <input name="sliceW" /> Height <input name="sliceH" />
        </div>
				<div>
          Slice X <input name="sliceX" /> Slice Y <input name="sliceY" />
        </div>
				<div>
          Scale <input name="scale" />
        </div>
			</div>
		</div>
	</form>
</div>

JavaScript

$(function() {
    var image = $('#crop-image');
    var zoomSlider = document.getElementById('zoom-slider');
    var canvasSize = null;
    var pictureContainer = $('.picture-frame');
    var maxPictureContainerWidth = 100;
    var maxPictureContainerHeight = 150;
    var isSliderInUse = false;

    // Wall is in Cm, convert to Inches to work out pixel sizes at 300dpi
    var wallWpx = (0.393700787 * pictureContainer.attr('data-width')) * 300; // data-width is the wall width in pixels
    var wallHpx = (0.393700787 * pictureContainer.attr('data-height')) * 300; // data-height is the wall height in pixels

    var sampleImageScaleFactor = (image.attr('width') / image.attr('original-width'));

    var wallSize = {
        width: wallWpx * sampleImageScaleFactor, // scaling the wall size corresponding the sample size
        height: wallHpx * sampleImageScaleFactor,
        originalWidth: pictureContainer.attr('data-width'),
        originalHeight: pictureContainer.attr('data-height')
    };
    var wallAspectRatio = wallSize.originalWidth/wallSize.originalHeight;
    var pictureContainerSizes = {
        'width': maxPictureContainerWidth * (wallAspectRatio > 1 ? 1 : wallAspectRatio) ,
        'height': maxPictureContainerHeight / (wallAspectRatio > 1 ? wallAspectRatio : 1)
    };
    pictureContainer.css(pictureContainerSizes).removeClass('hidden');
    var zoomStep = 0.2;
    var biggerSide = null;
    
    var zoomModal = $('#modal-warning');
    var handleZoomHold, handleZoomFired;
        
    image.cropper({
        zoom: 0.2,
        guides: false,
        cropBoxResizable: false,
        cropBoxMovable: false,
        //viewMode: 3,
        dragMode: 'move',
        left: 0,
        top: 0,
        //width: canvasSize.width,
        //height: canvasSize.height,
        //aspectRatio: 1,
        toggleDragModeOnDblclick: false,
        zoomOnTouch: true,
        zoomOnWheel: true
    });  
    
    // Event
    image.on('built.cropper', function() {
       ...