image already in document then how to impelement crop functionality above the image

[dchirag005]

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

[AhamedBilal]

you can set [imageChanedEvent]="imageChangedEvent" when button clicked

[dchirag005]

please show example demo and me already some try to implement but not working. but how to pase value in imageChanedEvent attribute.

[AhamedBilal]

export class AppComponent { imageChangedEventTemp: any; imageChangedEvent: any; base64: any;

fileChangeEvent(event: any) { this.imageChangedEventTemp = event; }

buttonClicked(event: any) { this.imageChangedEvent = this.imageChangedEventTemp; }

imageCropped(event: CroppedEvent) { this.base64 = event.base64; } }

[dchirag005]

In file not use input tag then how to use fileChangeEvent function on button click event then how create proper event pase in imageChangedEventTemp and also not use ngx-photo-editor tag then only write in ts file. how to implement photo-editor in file.

[AhamedBilal]

use imageUrl or get base64 from the image tag and use it on the ngx-photo-editor

[dchirag005]

Facing problem crop functionality.

• First time crop functionality working proper then click on Apply and cancel button then modal close but crop functionality working in background.
• then second time modal not open.
• My point is how to destroy crop event.

[AhamedBilal]

can you put the code?

[AhamedBilal]

to destroy u can set the imageUrl prop to null

[dchirag005]

it's work

[dchirag005]

• How to remove header.
• How to increase modal height.

[AhamedBilal]

ill try to fix the issue tonight.

[rocky-23]

Hello @AhamedBilal how to use your image-editor functionality with full-width crop after I browse.

[shalvy]

Stopped working , after uploading the picture it nolonger opens the editor

"@adactive/bootstrap-tagsinput": "0.8.2", "@agm/core": "1.1.0", "@amcharts/amcharts4": "^4.10.13", "@angular/animations": "9.0.4", "@angular/cdk": "^9.2.4", "@angular/common": "9.0.4", "@angular/compiler": "9.0.4", "@angular/core": "9.0.4", "@angular/fire": "^6.0.1", "@angular/flex-layout": "^11.0.0-beta.33", "@angular/forms": "9.0.4", "@angular/localize": "^9.0.4", "@angular/material": "^10.0.0", "@angular/platform-browser": "9.0.4", "@angular/platform-browser-dynamic": "9.0.4", "@angular/router": "9.0.4", "@fortawesome/angular-fontawesome": "^0.6.1", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-brands-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@ng-bootstrap/ng-bootstrap": "^6.0.0", "@ng-select/ng-option-highlight": "0.0.6", "@ng-select/ng-select": "^4.0.4", "@ngui/map": "0.30.3", "@ngx-translate/core": "^12.0.0", "@ngx-translate/http-loader": "^6.0.0", "@types/gapi": "0.0.39", "@types/googlemaps": "3.36.5", "@types/intro.js": "^3.0.2", "ajv": "6.10.0", "angular-feather": "^6.0.10", "bootstrap": "4.3.1", "bootstrap-notify": "3.1.3", "bootstrap-select": "1.12.4", "bootstrap-tagsinput": "0.7.1", "chart.js": "2.8.0", "chartist": "0.11.2", "chartist-plugin-zoom": "0.5.0", "chartjs-plugin-zoom": "0.7.0", "chokidar": "^3.4.3", "classlist.js": "^1.1.20150312", "core-js": "3.6.4", "crypto-ts": "^1.0.2", "datatables": "1.10.18", "datatables.net": "1.10.19", "datatables.net-bs": "1.10.19", "datatables.net-bs4": "1.10.19", "datatables.net-colreorder": "1.5.1", "datatables.net-colreorder-bs4": "1.5.1", "datatables.net-fixedcolumns": "3.2.6", "datatables.net-fixedcolumns-bs4": "3.2.6", "datatables.net-fixedheader-bs4": "3.1.5", "datatables.net-responsive": "2.2.3", "datatables.net-responsive-bs4": "2.2.3", "datatables.net-rowgroup-bs4": "1.1.0", "datatables.net-scroller-bs4": "2.0.0", "datatables.net-select-bs4": "1.3.0", "easy-pie-chart": "2.1.7", "eonasdan-bootstrap-datetimepicker": "4.17.47", "express": "^4.17.1", "firebase": "^7.17.1", "firebase-functions": "^3.13.0", "fullcalendar": "3.10.0", "intro.js": "^4.2.2", "jasny-bootstrap": "4.0.0", "jquery": "3.4.1", "jvectormap": "2.0.4", "jvectormap-next": "^3.1.1", "jw-bootstrap-switch-ng2": "2.0.5", "moment-weekday-calc": "^1.1.4", "ng-bootstrap-icons": "^1.3.0", "ng-http-loader": "^8.0.0", "ng-photo-editor": "^1.0.1", "ngx-chips": "2.1.0", "ngx-photo-editor": "^0.3.8", "nouislider": "9.2.0", "perfect-scrollbar": "1.4.0", "popper.js": "1.15.0", "rxjs": "6.5.4", "rxjs-compat": "6.5.4", "save": "^2.4.0", "socket.io": "^2.2.0", "socket.io-client": "^2.2.0", "sweetalert2": "8.12.1", "twitter-bootstrap-wizard": "1.2.0", "web-animations-js": "2.3.1", "zone.js": "0.10.2" },

HTML

  

typescript

fileChangeEvent(event: any) { this.imageChangedEvent = event; const file = event.target.files[0]; console.log(file); }

imageCropped(event: CroppedEvent) { this.base64 = event.base64; // console.log(this.base64); const filedDoc = event.file; console.log(filedDoc); // this.ws.uploadProfilePic(event); // some code ........... }

[AhamedBilal]

@shalvy Can you share the error log

[shalvy]

its not logging any error at all

On Mon, Mar 14, 2022 at 12:45 PM Ahamed Bilal @.***> wrote:

@shalvy https://github.com/shalvy Can you share the error log

— Reply to this email directly, view it on GitHub https://github.com/AhamedBilal/ngx-photo-editor/issues/18#issuecomment-1066631245, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGNMFZ4ROXEDFLVJN7AMRCTU74KCXANCNFSM5KWCKVGQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[AhamedBilal]

fix these issues in the new version, check out v0.4