I have created an application using cropper.js for cropping an images, the application is working and the image is cropping but I am not able to see the preview, my preview div is not populating anything correctly while cropping. My code is as given below

Can anyone please tell me some solution for this

Plunker

script

 var $image = $('.img-container > img'),
    $dataRotate = $('#dataRotate'),
    options = {
       modal: true,
       guides: true,
       autoCrop: false,
       dragCrop: true,
       movable: true,
       resizable: true,
       zoomable: false,
       touchDragZoom: false,
       mouseWheelZoom: false,
       preview: '.preview',
      crop: function (data) {
        $dataRotate.val(Math.round(data.rotate));
      }
    };

I have created an application using cropper.js for cropping an images, the application is working and the image is cropping but I am not able to see the preview, my preview div is not populating anything correctly while cropping. My code is as given below

Can anyone please tell me some solution for this

Plunker

script

 var $image = $('.img-container > img'),
    $dataRotate = $('#dataRotate'),
    options = {
       modal: true,
       guides: true,
       autoCrop: false,
       dragCrop: true,
       movable: true,
       resizable: true,
       zoomable: false,
       touchDragZoom: false,
       mouseWheelZoom: false,
       preview: '.preview',
      crop: function (data) {
        $dataRotate.val(Math.round(data.rotate));
      }
    };

• javascript
• jquery
• image
• crop

1 Answer 1

You need to set the size of the .preview element with css. Also set the overflow to hidden, e.g.

.preview {
  overflow: hidden;
  width: 50px; 
  height: 50px;
}

Also forked your plunk and your updated plunk.