Установите минимальную ширину и высоту для области обрезки

Question

Я использую cropperjs Crooperjs для обрезки изображений, я хочу указать минимальные размеры для области обрезки, Cropper добавить встроенный стиль для изображений, которые будут доступны для просмотра пользователям, а не весь экран размер.

В этом примере http://jsfiddle.net/abp7Lzc4/8 Исходное изображение размеры составляют 835x470, но после обработки изображения с помощью Cropper размеры стали 502x282.375, вот изображение после обработки Cropper :

<img crossorigin="anonymous" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" class="cropper-hide" style="width: 502px; height: 282.375px; transform: none;">

Теперь размеры области обрезки определяются кадрирующим элементом для соответствия новым размерам изображения.

Я хочу установить минимальные размеры для поля обрезки, например 300x300, но если я использую CSS или javascript для стилизации поля и задаю им эти размеры, если размеры нового изображения меньше 300x300 для поля будет превышать размеры изображения.

Вот код:

  window.addEventListener('DOMContentLoaded', function () {
    var image = document.querySelector('#image');
    var result = document.querySelector('#result');
    var cropper = new Cropper(image, {
      aspectRatio: 1,
      initialAspectRatio: 1,
      movable: false,
      scalable: false,
      zoomable: false,
      zoomOnTouch: false,
      zoomOnWheel: false,
      imageSmoothingEnabled: true,
      imageSmoothingQuality: 'high',
      toggleDragModeOnDblclick: false,
      minCropBoxWidth: 300,
      minCropBoxHeight: 300,
      cropBoxResizable: true,
      dragMode: 'move',
      viewMode: 0,
      ready: function () {
        var image = new Image();
        image.src = cropper.getCroppedCanvas().toDataURL('image/jpeg');
        result.appendChild(image);
      }, // ready
    }); // cropper
  }); // onload

.container {
  max-width: 640px;
  margin: 20px auto;
}

img {
  max-width: 100%;
}

<!-- Cropper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>

<!-- Cropper CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css">
    
    <div class="container">
      <h1>Crop a cross origin image</h1>
      <p>A cross origin image with a <code>crossorigin</code> attribute and an available <code>Access-Control-Allow-Origin</code> response header can be cropped by Cropper.
      </p>
      <h3>Image</h3>
      <div>
        <img id="image" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" crossorigin>
      </div>
      <h3>Result</h3>
      <div id="result"></div>
    </div> <!-- .container -->

Как это сделать, чтобы при любых размерах изображения минимальные размеры области обрезки обрезали область с размерами 300x300?

Или кто-нибудь знает альтернативный метод или библиотеку, которая могла бы достичь того, что я ищу?