FRONTEND_MVC/widgets/views/cropperjswidget/modal.php

<style>
.img-container img {
      max-width: 100%;
}
#container_image {max-width: 100%;}
</style>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Фото в заголовок</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="img-container">
          <img id="container_image" src="/img/e.gif">
        </div>
      </div>
      <div class="modal-footer justify-content-between">
        <div class="btn-toolbar" role="toolbar" aria-label="Панель инструментов с группами кнопок">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-primary" onClick="cropper.zoom(0.1);" disabled>
              <span class="docs-tooltip" title="cropper.zoom(0.1)">
			    <span class="fa fa-search-plus"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" onClick="cropper.zoom(-0.1);" disabled>
              <span class="docs-tooltip">
			    <span class="fa fa-search-minus"></span>
              </span>
            </button>
          </div>

          <div class="btn-group mr-2">
            <button type="button" class="btn btn-primary" onClick="cropper.scaleX(-1)" disabled>
              <span class="docs-tooltip" >
			<span class="fa fa-arrows-alt-h"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" onClick="cropper.scaleY(-1)" disabled>
              <span class="docs-tooltip">
			<span class="fa fa-arrows-alt-v"></span>
              </span>
            </button>
          </div>
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-primary" onClick="cropper.rotate(-45)" disabled>
              <span class="docs-tooltip">
			<span class="fa fa-undo-alt"></span>
              </span>
            </button>
            <button type="button" class="btn btn-primary" onClick="cropper.rotate(45)" disabled>
              <span class="docs-tooltip">
			<span class="fa fa-redo-alt"></span>
              </span>
            </button>
          </div>
          <div class="btn-group mr-2">
           <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton">
              <span class="docs-tooltip"><span class="fa fa-image"></span></span>
            </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
				<a class="dropdown-item" href="javascript:void(0)" onClick="defphoto('/images/d2.jpg')">Хз что случилось</a>
				<a class="dropdown-item" href="javascript:void(0)" onClick="defphoto('/images/d1.jpg')">Внимание</a>
				<a class="dropdown-item" href="javascript:void(0)" onClick="defphoto('/images/default.jpg')">Всё пропало</a>
			</div>
           </div>
          </div>
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-primary"  onClick="cropper.reset()">
              <span class="docs-tooltip">
				<span class="fa fa-sync-alt"></span>
              </span>
            </button>
			<span class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
			<input type="file" class="sr-only" id="inputImage" name="<?=$this->context->file?>" accept="image/*" index="1">
            <span class="docs-tooltip" title="загрузить"  onClick="$('#inputImage').click();">
              <span class="fa fa-upload"></span>
            </span>
          </span>
          </div>

        </div>
        <div class="btn-toolbar">
          <button type="button" class="btn btn-secondary mr-3" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onClick="phsave(this)" >Сохранить изменения</button>
        </div>
      </div>
    </div>
  </div>
</div>

<input type="hidden" id="news-photo-x" name="<?=$this->context->post?>[x]" value="">
<input type="hidden" id="news-photo-y" name="<?=$this->context->post?>[y]" value="">
<input type="hidden" id="news-photo-width" name="<?=$this->context->post?>[width]" value="">
<input type="hidden" id="news-photo-height" name="<?=$this->context->post?>[height]" value="">
<input type="hidden" id="news-photo-url" name="<?=$this->context->post?>[url]" value="">

<script>
    var cropper;
    window.addEventListener('DOMContentLoaded', function () {
      var image = document.getElementById('container_image');
      var cropBoxData;
      var canvasData;

      $('#modal').on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
          autoCropArea: 1,
		  viewMode:1,
		  modal:true,
		  aspectRatio: <?=$this->context->aspectRatio?>,
		  zoomOnWheel: true,
		  guides: true,
		  center: true,
          ready: function () {
            //Should set crop box data first here
            cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
          }
        });
		//$(document).ready(function(){setTimeout( function(){document.getElementById("inputImage").click()}, 1000 )});
      }).on('hidden.bs.modal', function () {
        cropBoxData = cropper.getCropBoxData();
        canvasData = cropper.getCanvasData();
        cropper.destroy();
      });
    });
	function phsave( obj ){
		console.log(cropper.getData());
		var data = cropper.getData();
		$("#news-photo-x").val(data.x);
		$("#news-photo-y").val(data.y);
		$("#news-photo-width").val(data.width);
		$("#news-photo-height").val(data.height);
		$("#news-photo-url").val(window.urlimg);
//		$("#image").src = uploadedImageURL;
//		console.log(uploadedImageURL);
//		$("#image").canvas = cropper.getCroppedCanvas();

	    var $pcimg = $('#<?=$this->context->image?>');
		croppedImage = cropper.getCroppedCanvas();
		croppedImage.toBlob(function(blob) {
			var newImg = document.createElement('img'),
				url = URL.createObjectURL(blob);
				$(newImg).attr('id','himg');
				newImg.onload = function() {
					URL.revokeObjectURL(url);
				};
				newImg.src = url;
				$pcimg.prop('src', url).show();
			}, 'image/jpeg', 0.95);

		$('#modal').modal('hide');
	}


// Import image
  var inputImage = document.getElementById('inputImage');
  var uploadedImageType = 'image/jpeg';
  var uploadedImageName = 'cropped.jpg';
  var uploadedImageURL;
  var container = document.querySelector('.img-container');
  var image = container.getElementsByTagName('img').item(0);
  var originalImageURL = image.src;
  var URL = window.URL || window.webkitURL;
  if (URL) {
    $("#inputImage").on('change', function (e) {
      var files = this.files;
      var file;
//console.log(this);
      if (files && files.length) {
        file = files[0];

        if (/^image\/\w+/.test(file.type)) {
          uploadedImageType = file.type;
          uploadedImageName = file.name;

          if (uploadedImageURL) {
            URL.revokeObjectURL(uploadedImageURL);
          }

          image.src = uploadedImageURL = URL.createObjectURL(file);
		  var o = cropper.options;
          if (cropper) {
            cropper.destroy();
          }

          cropper = new Cropper(image, o);
          //inputImage.value = null;
        } else {
          window.alert('Please choose an image file.');
        }
      }
    });
  } else {
    inputImage.disabled = true;
    inputImage.parentNode.className += ' disabled';
  }
	function defphoto(urlimg){
		cropper.replace(urlimg,false);
		window.urlimg = urlimg;
		cropper.reset();
	}
</script>
<?