title: CropperJS: Image outsite the crop box is not visible
body: <p>I am using javascript <a href="https://github.com/fengyuanchen/cropper" rel="nofollow noreferrer">cropperjs</a> to crop images uploaded by the user. In the cropper display, the image outside the crop-box is not visible. A sample in shown in the below image -</p>
  
  <p><a href="https://i.stack.imgur.com/WQqXU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WQqXU.png" alt="enter image description here"></a></p>
  
  <p>My cropper config is -</p>
  
  <pre><code>var cropper_opts = {
    aspectRatio: 1/1,
    viewMode: 0,
    crop: function(e){}, //to show the crop box manually
    minCanvasWidth: 0,
    minCanvasHeight: 0,
    minCropBoxWidth: 0,
    minCropBoxHeight: 0,
    minContainerWidth: 860,   //decides the size of image
    minContainerHeight: 355,  //decides the size of image
    autoCropArea: 1,
    modal: true,      // Show the black modal
    guides: true,     // Show the dashed lines for guiding
    center: true,     // Show the center indicator for guiding
    highlight: true,  // Show the white modal to highlight the crop box
    background: true, // Show the grid background
  }
  </code></pre>
  
  <p>Please help me to resolve this.</p>