problem in using ember-cli-image-cropper

[AnindyoChoudhury]

Hello, I am having problem with using the ember-cli-image-cropper. I made an ember application. Made an component avatar-cropper. then put the code from your io demo. the preview function is working fine, but i am unable to get the cropped avatar. My avatar-cropper.hbs file looks like

<div class="container">

    <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;">

                <img src="image.jpg" style="display: block; width: 337.778px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; height: 190px; margin-left: 0px; margin-top: 0px; transform: none;">

            </div>

            Preview

        </div>

        <div class="cropped">

            <div class="cropped-avatar">

                <!---->

            </div>

            Cropped Avatar

        </div>

    </div>

    <button {{action "getCroppedAvatar"}}>Crop Avatar</button>

    </div>

{{yield}}

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.

please help me. I am stuck here for a week

[mhretab]

Hi @AnindyoChoudhury your avatar-cropper.js includes an empty default ember component in the first three lines:

import Ember from 'ember';

export default Ember.Component.extend({

});

that is not necessary as it is an empty component. please delete that part of the code and try again.

[AnindyoChoudhury]

Hey, Thanks a lot for replying, really thanks alot. I have deleted it still it is not working, i feel i have got the reason of the problem in your hbs file you have

<div class="cropper-container" style="width:400px;">
    <img width="400px" src="assets/images/picture-324ad4786a909244f258e0e0dea42a55.jpg" class="cropper-hidden">

    <div class="cropper-container cropper-bg" style="width: 400px; height: 225px;">
      <div class="cropper-canvas" style="width: 400px; height: 225px; left: 0px; top: 0px;">
        <img src="http://mhretab.github.io/ember-cli-image-cropper/assets/images/picture-324ad4786a909244f258e0e0dea42a55.jpg" class="" style="width: 400px; height: 225px; margin-left: 0px; margin-top: 0px; transform: none;">
      </div>
      <div class="cropper-drag-box cropper-modal cropper-crop" data-drag="move">
      </div>
      <div class="cropper-crop-box" style="width: 180px; height: 180px; left: 110px; top: 22.5px;">
        <span class="cropper-view-box">
          <img src="http://mhretab.github.io/ember-cli-image-cropper/assets/images/picture-324ad4786a909244f258e0e0dea42a55.jpg" style="width: 400px; height: 225px; margin-left: -110px; margin-top: -22.5px; transform: none;">
        </span>
        <span class="cropper-dashed dashed-h">
        </span>
        <span class="cropper-dashed dashed-v">
        </span>
        <span class="cropper-face" data-drag="all">
        </span>
        <span class="cropper-line line-e" data-drag="e">
        </span>
        <span class="cropper-line line-n" data-drag="n">
        </span>
        <span class="cropper-line line-w" data-drag="w">
        </span>
        <span class="cropper-line line-s" data-drag="s">
        </span>
        <span class="cropper-point point-e" data-drag="e">
        </span>
        <span class="cropper-point point-n" data-drag="n">
        </span>
        <span class="cropper-point point-w" data-drag="w">
        </span>
        <span class="cropper-point point-s" data-drag="s">
        </span>
        <span class="cropper-point point-ne" data-drag="ne">
        </span>
        <span class="cropper-point point-nw" data-drag="nw">
        </span>
        <span class="cropper-point point-sw" data-drag="sw">
        </span>
        <span class="cropper-point point-se" data-drag="se">
        </span>
      </div>
    </div>
  </div>

these data-drags are missing in my hbs file and i cant get them to work on pasting these lines in my code, i feel data-drag has to be changed into some action which must be called from my js file, can you please see my hbs file and help with it.

[mhretab]

@AnindyoChoudhury that is not in the hbs file. It is the html generated by cropper when you interact with the component. If you follow the instructions on README file it should work for you.

[AnindyoChoudhury]

I have followed your instructions but i cannot get the canvas element in the cropped area. everything is fine i am getting the preview and all but not the cropped image. my avatar-cropper.js file is exactly like your example I only have trouble in my hbs file. please help

     <div class="container">

    <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 {{action "getCroppedAvatar"}}>Crop Avatar</button>

    </div>

    {{yield}}

[mhretab]

Hi, inside the div with cropped-avatar class you should put the property {{croppedAvatar}} so it gets updated after cropping. here is the hbs of avatar-cropper in the dummy test.

<div class="cropper">
  <div class="cropper-container" style="width:400px;">
    <img src={{image}} width="400px">
  </div>
  <div class="preview">
    <div class="img-preview"></div>
    Preview
  </div>
  <div class="cropped">
    <div class="cropped-avatar">
      {{croppedAvatar}}
    </div>
    Cropped Avatar
  </div>
</div>

<button {{action "getCroppedAvatar"}}>Crop Avatar</button>

I hope this helps.

[AnindyoChoudhury]

Thanks a lot man. really thanks a lot yes {{croppedAvatar}} was missing. now i am getting the cropped image.

I had been stuck here for weeks man, had it not for you, I could not have done it. Thanks a lot again and again!

[mhretab]

no problem. glad I could help!

[yandiro]

Bro, please don't get me wrong, but I think some clarification about the HBS files would do some good. I too was stuck here for hours!

For example, my view is like this:

A bit messy and the preview does not work properly.

If you want I can edit the readme file about stuff I know.