File Name: ngx-photo-editor/photo-editor.css
In line 1 casing issue @import "~cropperjs/dist/cropper.css";
It's working now as @import "../cropperjs/dist/cropper.css";
in Angular 17

Please anyone review that and fix it.

issue when try to exit from page.

when i change the page after loading the photo editor doesn't close the editor

i want when i move cursor from cropbox it should not crop the image until i click on crop button

Hi AhamedBilal team. How to I can change button name of popup crop image of your package?
This demo of my issue

Hello @AhamedBilal
how to use your image-editor functionality using button click event and image in document above. and proper functions working.

imageChanedEvent must be imageChangedEvent ???

Error: Can't bind to 'imageChanedEvent' since it isn't a known property of 'ngx-photo-editor'.

1. If 'ngx-photo-editor' is an Angular component and it has 'imageChanedEvent' input, then verify that it is part of this module.s module. nt to suppress this message.
2. If 'ngx-photo-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   $event)"

Hi @AhamedBilal
i was trying to load image using URL so i found that it's [imageUrl] not [imageURL].

Hello, currently there is no way to hide the cancel button or hook to the closing event after it is pressed. Either would be greatly helpful in 'resetting' the editor when using the imageURL attribute to load the editor.

File photo-editor.css add to style.css. Chrome console load photo-editor.css true.
Add NgxPhotoEditorService in lazyload module:

• Error: Module not found: Error: Expecting folder to folder mapping. "./photo-editor.css" should end with "/"

what could be the problem? Angular 14.0

Thank you

Style issues showing when use cropper

I have Implemented the Component.

In .ts
`output?: NgxCroppedEvent;
image?: any;
constructor(private service: NgxPhotoEditorService) { }

fileChangeHandler($event: any) {
this.image = $event;
}

close($event) {
console.log($event);
this.image = null;
}

error($event) {
console.log($event);
}

croppedImage($event) {

console.log($event);
this.output = $event;
this.image = null;

}`

in .HTML

`<input type="file" (change)="fileChangeHandler($event)">

<img [src]="output?.base64" alt="" style="width: 100%;">

<lib-ngx-photo-editor *ngIf="image" [source]="image" [hideModalHeader]="true" (closeEvent)="close($event)" (errorEvent)="error($event)" (imageCroppedEvent)="croppedImage($event)">
`

When we check in the Desktop Mode, it works as intended. But when we open inspector change to Mobile view, it requires and extra click to close the Editor Popup after Apply.

@AhamedBilal
You can also try with the online demo https://ahamedbilal.github.io/ngx-photo-editor/

Hi, it would be nice if the cropped file result keeps the original file name, if available, maybe with a suffix.

my-original-file.jpg => my-original-file_1675158015.jpg

The suffix could be an option that, if empty, will be the unix datetime you are currently using for the cropped file name.

Hi, trying to use the round cropper mask, could you provide an example?

Hello,

I tried to use the component in my application. I did what the doc says for installation but when displaying the editor there are no buttons under the image.

Can someone help please !

if i use

[resizeToHeight]="128"
[aspectRatio]="2/1"

or smaller, i always get an Image with 512x256

Is there a problem with small formats?

Hi, I've the following issues upon installation:

WARNING in ./node_modules/ngx-photo-editor/fesm5/ngx-photo-editor.js
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

I'm using the following:
"@angular/core": "7.2.15",
"typescript": "~3.1.3",
"ngx-photo-editor": "^0.3.5"

How do I get the width of an image?

Currently, the flip horizontal button will flip the photo vertically. Same but opposite behavior with the flip vertical button.

these are my dependencies in package.json
"@angular/animations": "12.1.1",
"@angular/cdk": "12.1.1",
"@angular/common": "12.1.1",
"@angular/compiler": "12.1.1",
"@angular/core": "12.1.1",
"@angular/forms": "12.1.1",
"@angular/google-maps": "^12.1.1",
"@angular/material": "12.1.1",
"@angular/platform-browser": "12.1.1",
"@angular/platform-browser-dynamic": "12.1.1",
"tslib": "2.3.0",
Getting This ERROR
Generating browser application bundles (phase: setup)...E:\Angular Projects\linksupercharger-loopback-server\ng-admin\node_modules@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40
throw new Error("The target entry-point "" + invalidTarget.entryPoint.name + "" has missing dependencies:\n" +
^

Error: The target entry-point "ngx-photo-editor" has missing dependencies:

• @ng-bootstrap/ng-bootstrap

  at TargetedEntryPointFinder.findEntryPoints (E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)
  at E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\src\execution\analyze_entry_points.js:29:41
  at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:28:29)
  at E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:59
  at SyncLocker.lock (E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\src\locking\sync_locker.js:34:24)
  at SingleProcessExecutorSync.execute (E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:27)
  at Object.mainNgcc (E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\src\main.js:74:25)
  at Object.process (E:\Angular Projects\project\ng-admin\node_modules@angular\compiler-cli\ngcc\index.js:29:23)
  at NgccProcessor.processModule (E:\Angular Projects\project\ng-admin\node_modules@ngtools\webpack\src\ngcc_processor.js:175:16)
  at E:\Angular Projects\project\ng-admin\node_modules@ngtools\webpack\src\ivy\host.js:146:18
  at E:\Angular Projects\project\ng-admin\node_modules@ngtools\webpack\src\ivy\host.js:76:24
  at Array.map ()
  at Object.host.resolveModuleNames (E:\Angular Projects\project\ng-admin\node_modules@ngtools\webpack\src\ivy\host.js:74:32)
  at actualResolveModuleNamesWorker (E:\Angular Projects\project\ng-admin\node_modules\typescript\lib\typescript.js:109497:133)
  at resolveModuleNamesWorker (E:\Angular Projects\project\ng-admin\node_modules\typescript\lib\typescript.js:109760:26)
  at resolveModuleNamesReusingOldState (E:\Angular Projects\project\ng-admin\node_modules\typescript\lib\typescript.js:109857:24)