unable to use ember-cli-image-cropper

I am having problem with using the ember-cli-image-cropper.

http://ift.tt/21iJTdH

I made an ember application. Made an component avatar-cropper. then put the code from your io demo.

http://ift.tt/1XQXtIt

The preview function is working fine, but i am unable to get the cropped avatar.

My avatar-cropper.hbs file looks like

<div class="cropper">
    <div class="cropper-container" style="width:400px;">
        <img width="400px" src="image.jpg"  class="cropper-hidden">

    </div>
    <div class="preview">
        <div class="img-preview" style="width: 152px; height: 152px;">

        </div>
        Preview
    </div>
    <div class="cropped">
        <div class="cropped-avatar">
            <!---->
        </div>
        Cropped Avatar
    </div>
</div>
<button >Crop Avatar</button>

and my avatar-cropper.js file looks like

import Ember from 'ember';

export default Ember.Component.extend({

});

// app/components/avatar-cropper.js
import imageCropper from 'ember-cli-image-cropper/components/image-  cropper';

export default imageCropper.extend({
    //override default options of cropper
    aspectRatio: 1,
    minCropBoxWidth: 100,
    minCropBoxHeight: 100,
    cropperContainer: '.cropper-container > img',
    previewClass: '.img-preview',
    croppedAvatar: null,

    actions:
    {
        getCroppedAvatar: function() 
        {
            alert('hi');
            var container = this.$(this.get('cropperContainer'));
            var croppedImage = container.cropper('getCroppedCanvas');
            this.set('croppedAvatar', croppedImage);
            alert('bye');
        }
    }
});

the function getCroppedAvatar is working as I get both alert messages, but i dont get the image at cropped area.