customization

[Rim-777]

Hi, really enjoyed using your plugin. could you please to give a bit information about following?

1. how can I use 'cropping' within component, I mean not only in templates? For example I would like to wrap cropping.fit() with my own function: Something like this: someMethod () { //do somthing; this.cropping.fit() }
2. Is there any possibility to reduce step of zoomIn/zoomOut?
3. Is there any possibility to limit the output of the picture beyond the borders of ly-img-container?
4. Is there any possibility to put a picture 'fit to screen' as initial(default)?

Thanx again and looking forward to your replay

[Enlcxx]

Hi, for you to use in the component, you can use ViewChild example:

@Component({
...
})
export class MyComponent implements AfterViewInit {
  @ViewChild(LyResizingCroppingImages) imgCropper: LyResizingCroppingImages;
  ngAfterViewInit() {
    console.log(this.imgCropper);
  }
  someMethod() {
    this.imgCropper.fit();
  }
}

Everything else for now is not possible, I will keep it in mind for the new features in the next version.

[Rim-777]

Thank you for the explanation. Also thanks for the intention to improve. Please also take into account a rotation possibility if it is possible for you. I'll keep track your updates. Thanks again

[alyleui]

About the rotation, I was thinking that I could rotate with any degree, for example, rotate 45 degrees, 35 degrees, 175 degrees ... Obviously, without the image going beyond the boundary of the cropping area.

demo:

That will be in another extraction request.

[alyleui]

• The zoom can be controlled with setScale(scale: number)
• for to put a picture 'fit to screen' as initial (default) you can try this

  <ly-cropping #cropper
  [config]="myConfig"
  (cropped)="onCropped($event)"
  (loaded)="cropper.fitToScreen()"
  (error)="onError($event)">
  <span>Drag and drop image</span>
  </ly-cropping>

[Enlcxx]

new version 1.7.5

[Rim-777]

Thank you again. Is setScale(scale: number) a setter for the privet property zoomScale? Also is it possible to get access to the picture after it is loaded? Regarding rotation, I think if it could rotate 90 degrees - it would be enough for avatars cropping

[Rim-777]

Wow, Thanks a lot for the new version, now it is much better. Is it available via npm already?

[Enlcxx]

yes, it is available in npm

here a demonstration of the setScale () with an input range

but there is a bug, when the scale is set to 0

[Rim-777]

@Enlcxx Thank you for the example and for the great improvement. Can I ask you a question more? Is there a possibility to get an image size on 'loaded' for the case to show user info if the size is to small for example? Besides that it could be useful to dynamically define a scale parameter for setScale()

[Enlcxx]

Now loaded emit an event with width & height, where this shows some data of the current image.

But will be available for the next version, if you want to try it now you can install the latest build in the following way yarn add @alyle/ui@nightly

Regarding scale, Is it thought that it would be like that?

<ly-cropping
[config]="myConfig"
[scale]="scale">

[Rim-777]

@Enlcxx I have installed npm i @alyle/ui@latest -s After run ng serve I got these list of errors:

ERROR in node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,38): error TS1005: ')' expected. node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,81): error TS1005: ')' expected. node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,94): error TS1005: '(' expected. node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,96): error TS1005: ';' expected. node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,104): error TS1005: ';' expected. node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,105): error TS1005: ';' expected. node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,106): error TS1128: Declaration or statement expected. node_modules/@alyle/ui/src/theme/theme2.service.d.ts(86,115): error TS1109: Expression expected. node_modules/@alyle/ui/themes/minima/base.d.ts(50,19): error TS1005: ';' expected. node_modules/@alyle/ui/themes/minima/base.d.ts(64,1): error TS1128: Declaration or statement expected.

[Enlcxx]

Thanks for reporting this error, you can send me the result of ng -v

[Enlcxx]

Alyle UI has some requirements for it to work properly.

typescript> = 2.9.x angular => 6.1.10

but I still found an error, for the next version it will be fixed

[Enlcxx]

new version 1.7.6 npm

[Rim-777]

@Enlcxx I've updated angular and looks like works Ok. Thank you. There are a few things left:

1. When I try to get and crop photo from camera on my cell phone, the cropper rotates the picture 90 degrees. Could you please check this if it is a bug?
2. Rotation feature, - it is still needed for avatars rotation 90, do you plan to add it in future versions?
3. Is there a possibility to get a preview. For example sort of like onChange(img) { } ?
4. Is there a possibility to remove pictures from cropper without uploading of new one?

[Enlcxx]

1. When I try to get and crop photo from camera on my cell phone, the cropper rotates the picture 90 degrees. Could you please check this if it is a bug?

I already found the bug, it has to do with Exif Orientation, will be fixed in a future version.

2. Rotation feature, - it is still needed for avatars rotation 90, do you plan to add it in future versions?

yes, in a future version.

3. Is there a possibility to get a preview. For example sort of like onChange(img) { } ?

As an autocrop?

4. Is there a possibility to remove pictures from cropper without uploading of new one?

Yes, use clean(), available in version 1.7.7

[Rim-777]

@Rim-777

As an autocrop? Yes I think it can be an autocrop after each change.

I'd like to tell you thanks again for your work and explanations.
I couldn't find a decent cropper for angular before met your plugin. With your help and the improvement now the plugin is suitable to the project I work on. I also really like to have your lightweight library (which makes my development-life easier) in my project. Can I ask you more questions please? I use the plugin for avatars-processes and I'd like to give users the opportunity to edit avatars whenever they want(not only when they upload and save cropped result but later as well). For these purposes I need to keep original pictures and also to keep all changes which were applied to pictures before the crop, such as scaling, moving etc...So when an user is pressing the edit-button I need to display them the cropper with an original picture in the position which is equal a cropped result. I mean picture in the cropper should be at the same position as it is on a cropped avatar. The question is the next: Is there the way to: 1) get the original picture, 2) get all data of a changed picture position , 3) assign pictures to the cropper from an external resource(database or cdn) 4) assign to cropper data(described in the point 2)?

[Enlcxx]

To get the original image will be available in the next version.

Everything else will be available possibly for version 1.8.0

Thanks for helping to improve this component.

[Enlcxx]

New version 1.7.9

[usmanshani92]

Is there any way to modify clean() method?

[Enlcxx]

@usmanshani92 Why do you want to modify this method? maybe you can use the (cleaned)event.

<ly-img-cropper
  ...
  (cleaned)="onClean()"
>

[usmanshani92]

Is it possible to get this kind of task with selected coordinates and multi color selected boxes?

[Enlcxx]

@usmanshani92 It's not possible I'm sorry.

[usmanshani92]

how to set width=500px; and height=400px; of an image on image uploading.

[Enlcxx]

@usmanshani92 I don't understand what you mean, but you can find the demos here.