title: how to give cropper.js a fixed height and width to crop accordingly
body: <p>I am using cropper.js v0.8.0</p>
  
  <p>I using the below jQuery code to crop the image.</p>
  
  <pre><code>function readURL(input) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
              reader.onload = function (e) {
                  $('#img_view').attr('src', e.target.result)
              };
              reader.readAsDataURL(input.files[0]);
              setTimeout(initCropper, 1000);
          }
  
  function initCropper(){
          // console.log("Came here")
          var image = document.getElementById('img_view');
          var cropper = new Cropper(image, {
            aspectRatio: 1/1,
            cropBoxResizable: false,
            crop: function(e) {
              // console.log(e.detail.x);
              // console.log(e.detail.y);
            }
          });
  
          // On crop button clicked
          document.getElementById('crop_button').addEventListener('click', function(){
              var imgurl =  cropper.getCroppedCanvas().toDataURL();
              var img = document.createElement("img");
              img.src = imgurl;
              document.getElementById("cropped_result").appendChild(img);
  
              /* ---------------- SEND IMAGE TO THE SERVER-------------------------
  
                  cropper.getCroppedCanvas().toBlob(function (blob) {
                        var formData = new FormData();
                        formData.append('croppedImage', blob);
                        // Use `jQuery.ajax` method
                        $.ajax('/path/to/upload', {
                          method: "POST",
                          data: formData,
                          processData: false,
                          contentType: false,
                          success: function () {
                            console.log('Upload success');
                          },
                          error: function () {
                            console.log('Upload error');
                          }
                        });
                  });
              */
          })
      }
  </code></pre>
  
  <p>By Defualt whenever the cropper area occurs to crop the image it is by default by aspect ratio. I want it to crop with a specific height and width like 420x230. I tried</p>
  
  <pre><code>maxCropBoxWidth: 420,
  maxCropBoxHeight: 230,
  </code></pre>
  
  <p>and</p>
  
  <pre><code>minCropBoxWidth: 420,
  minCropBoxHeight: 230,
  </code></pre>
  
  <p>Following is my HTML Code:</p>
  
  <pre><code>&lt;div class="custom-file"&gt;
      &lt;input type="file" id="post_featured_image" name="post_featured_image" class="custom-file-input" onchange="readURL(this);" /&gt;
      &lt;div class="image_container"&gt;
          &lt;img id="img_view" class="fixed-size-crop-box" src="#" alt="This is How the Featured Image will Look Exactly.."&gt;
      &lt;/div&gt;
      &lt;div id="cropped_result"&gt;&lt;/div&gt;
      &lt;button id="crop_button"&gt;Crop&lt;/button&gt;
      &lt;label class="custom-file-label" for="post_featured_image"&gt;Choose file&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but still no success. Is there any error in the code or due to a lower version its not working, can anyone help me out with the updated version. It would be very helpful. M stuck on this since last 10 hours.</p>