mhretab/ember-cli-image-cropper

Ember-cli addon for cropping/resizing images based on the jQuery Cropper plugin.

ember-cli-image-cropper's Issues

Add dummy app

Dummy app should be created to show the addon's capability

Switch to non-jQuery version of Cropper

Ember is moving away from jQuery. Consider switching to use non-jQuery version of Cropper;

Pass in "ready" option into Cropper

We're using this addon in our app but would like to pass in a ready function which is missing from this component wrapper.

Here is the PR for it: #32

Please provide a changelog

Hi, 👋

It would be useful to get the list of changes and bugfixes between versions, with migrations notes or recommendations if any. For now we have to search in the code or the Git history for API changes, and it can take some time when you have a lot of dependencies to update.

Please publish a GitHub release for the last version v0.0.14 with some explanations like about what changed and the recommendations to migrate (i.e. #36), and/or provide a CHANGELOG.md file.

See for example https://keepachangelog.com/en/1.0.0/

Thank you. ❤️

TypeError: undefined is not a function (evaluating 'cropperElment.cropper.destroy()')

In the last version (v0.0.9), I get this error:

TypeError: undefined is not a function (evaluating 'cropperElment.cropper.destroy()')

problem in using ember-cli-image-cropper

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

problem in uploading different images for cropping

Hello again,
Hey the image cropping is working very well.
But i am having difficulty to upload different images to be cropped; ie. I need to upload an image from the local system and then crop it. the code I an using is as follows.

the hbs file

<div class="container"> 

    <div class="cropper">

        <div class="cropper-container" style="width:400px;">

            <img width="400px" id="img" src="image.jpg">

        </div>

        <div class="preview">

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

            </div>

            Preview

        </div>

        <div class="cropped">

            <div class="cropped-avatar">

                {{croppedAvatar}}

            </div>

            Cropped Avatar

        </div>

  </div>

    <button class="button" {{action "getCroppedAvatar"}}>

        Crop Avatar

    </button>

    <input type="file" id="inputFileToLoad">

    <button  id="button" {{action "loadImageFileAsURL"}}>

         Load Selected File

    </button>
</div>

{{yield}}

and the corresponding js file is

            // 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() 
                    {
                        var container = this.$(this.get('cropperContainer'));
                        var croppedImage = container.cropper('getCroppedCanvas');
                        this.set('croppedAvatar', croppedImage);
                    },
                    loadImageFileAsURL: function()
                        {

                            var filesSelected = document.getElementById("inputFileToLoad").files;
                            if (filesSelected.length > 0)
                            {
                                var fileToLoad = filesSelected[0];
                                if (fileToLoad.type.match("image.*"))
                                {
                                      var fileReader = new FileReader();
                                    fileReader.onload = function(fileLoadedEvent) 
                                    {
                                        var imageLoaded = document.getElementById("img");
                                      imageLoaded.src = fileLoadedEvent.target.result;

                                    };
                                    fileReader.readAsDataURL(fileToLoad);
                                }

                            }
                        }
                }
            });

but the image is not changing. can you please help out with how to upload an image to a website from a client image and then crop it.

Switch from 0.0.13 to 0.0.14 was a breaking change

I just noticed that our image cropper stopped working after re-deploying the web-app...
the docs don't mention this breaking change, but I can see that the test in tests/dummy/app/components/avatar-cropper.js was updated.

Cannot use base64 encoded data URL as img:src "as is"

I found this library today and I got to find out that one cannot use a base64 encoded data URL as <img src={{image}}/> src attribute directly but one has to call this.$(this.get('cropperContainer')).cropper('replace', this.get('image')) from an observer or something the like to get things up and running...

Did I do something wrong or is this just missing in the documentation/readme?

"minContainerWidth" property not included in "getProperties"

Looks like a typo, but seems like minContainerWidth property isn't being set upon inserting the element:

https://github.com/mhretab/ember-cli-image-cropper/blob/master/addon/components/image-cropper.js#L52

getProperties gets minContainer rather than minContainerWidth

Broken with ember 2.11.0

"ember-cli-htmlbars": "1.0.11" -> "ember-cli-htmlbars": "^1.0.11"

Initializing cropper sets "cropper-container" element larger than image

When using this component, it sometimes sets the "cropper-container" div wider than the outer image container div. The result is the "left" style attribute of the "cropper-canvas" element is not "0px" but rather a positive value that pushes the image to the right.

I've added some screenshots showing the markup as well as the dom inspector so you can see the what I'm seeing.

ember-cli-image-cropper: 0.0.10
ember-cli: 2.6.3

I would love a little more explanation on using this component.

I'm just having a hard time understanding how to get this working.

The documentation is a little vague, do I need to call a component in the handlebars template some where, how does the component know what action to fire if I make a new action? How do I set the source of the cropper to the source of my image?

Fix version of HTMLBars

This extension throws out deprecation notes due to the fact that it uses old version of HTMLBars. Please update it to the newest version and make a new release tag and the issue we be solved.

DEPRECATION: Overriding init without calling this._super is deprecated. Please call this._super.init && this._super.init.apply(this, arguments); addon: ember-cli-htmlbars
at Function.Addon.lookup (/Users/estshy/enquicken/site/node_modules/ember-cli/lib/models/addon.js:896:27)

The component template does not render when using Ember 1.13.x

When using Ember 1.13.x with this component the component's div tag will get rendered but none of the content in its template.

How to use?

How should look a template for your the component?

Update ember-cli-htmlbars dependency

Could you please update the ember-cli-htmlbars dependency since there are issues with the dependency after updating ember from v2.6.0 to v2.7.0

Deprecation Ref

inconsistency between master branch and npm package

From my understanding the latest master should reflect what is published on npm. Now it is really confusing. I'm installing with ember install ember-cli-image-cropper which installs really outdated code with jQuery and in-compatible api.
E.g. https://ember-twiddle.com/ba1f81d311be62519a9dd74d73634f76?openFiles=twiddle.json%2Ctemplates.components.my-component.hbs
Took me a while to figure out what is going on.

I don't have a strong call to action, just warning to others, probably would face the same issue.

Image zoom in

I have used the dummy code given in the addon . When zooming in image is reduced to micro size . In the demo http://mhretab.github.io/ember-cli-image-cropper the minimum image size is set to the size of the size of crop box . Is there any method for this ?

Remove cropper from being bower dependencies

Bower is basically an obsolete package manager as the JS world transitions to npm/yarn. Please consider removing cropper as a bower dependencies and grabbing it with npm instead.

Component is not cleaning after itself

Please call $cropperContainer.destroy() on willRemoveElement event, otherwise there is a serious memory leak.

Add test

assess if unit/integration tests are required