{"id":27051062,"url":"https://github.com/lukaskupczyk/ngx-super-croppie","last_synced_at":"2025-04-05T08:28:35.646Z","repository":{"id":37005023,"uuid":"363638229","full_name":"lukaskupczyk/ngx-super-croppie","owner":"lukaskupczyk","description":"A simple Angular wrapper for croppie","archived":false,"fork":false,"pushed_at":"2024-10-26T18:18:27.000Z","size":712,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-05T01:32:51.854Z","etag":null,"topics":["angular","croppie","croppiejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukaskupczyk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-02T11:49:37.000Z","updated_at":"2024-10-26T18:15:52.000Z","dependencies_parsed_at":"2024-10-26T19:48:44.450Z","dependency_job_id":"da0dcde1-c85f-4a02-a619-bab0919514bd","html_url":"https://github.com/lukaskupczyk/ngx-super-croppie","commit_stats":{"total_commits":26,"total_committers":4,"mean_commits":6.5,"dds":0.2692307692307693,"last_synced_commit":"b026f49fa628699575a772b3782853da6bde89bf"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukaskupczyk%2Fngx-super-croppie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukaskupczyk%2Fngx-super-croppie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukaskupczyk%2Fngx-super-croppie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukaskupczyk%2Fngx-super-croppie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukaskupczyk","download_url":"https://codeload.github.com/lukaskupczyk/ngx-super-croppie/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247310285,"owners_count":20918138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","croppie","croppiejs"],"created_at":"2025-04-05T08:28:34.940Z","updated_at":"2025-04-05T08:28:35.571Z","avatar_url":"https://github.com/lukaskupczyk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxSuperCroppie\r\n\r\nNgxSuperCroppie is a simple angular8+ wrapper for [croppie](https://github.com/foliotek/croppie).\r\n\r\n## Version\r\n\r\nThe version numbers are in line with major Angular versions:\r\n\r\n| Angular Version | ngx-super-croppie Version |\r\n| --------------- | ------------------------- |\r\n| 10.x.x          | 10.x.x                    |\r\n| 11.x.x          | 11.x.x                    |\r\n| 12.x.x          | 12.x.x                    |\r\n| 13.x.x          | 13.x.x                    |\r\n| 14.x.x          | 14.x.x                    |\r\n| 15.x.x          | 15.x.x                    |\r\n| 16.x.x          | 16.x.x                    |\r\n| 17.x.x          | 17.x.x                    |\r\n| 18.x.x          | 18.x.x                    |\r\n\r\n## Installation\r\n\r\nInstall the package and croppie with yarn:\r\n\r\n```bash\r\nyarn add ngx-super-croppie croppie @types/croppie\r\n```\r\n\r\nor with npm:\r\n\r\n```bash\r\nnpm install ngx-super-croppie croppie @types/croppie\r\n```\r\n\r\n## Usage\r\n\r\n### 1. Import ngx-super-croppie in your src/app/app.module.ts\r\n\r\n```typescript\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { NgxSuperCroppieModule } from 'ngx-super-croppie';\r\n\r\n@NgModule({\r\n  declarations: [AppComponent],\r\n  imports: [BrowserModule, NgxSuperCroppieModule],\r\n  providers: [NgxSuperCroppieModule],\r\n  bootstrap: [AppComponent],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n### 2. Import the croppie styles in your src/styles.scss\r\n\r\n```css\r\n/* You can add global styles to this file, and also import other style files */\r\n@import '~croppie/croppie.css';\r\n```\r\n\r\n### 3. Configure ngx-super-croppie in your component.ts\r\n\r\n```typescript\r\nimport { Component, OnInit, ViewChild } from '@angular/core';\r\nimport { CroppieOptions, ResultOptions } from 'croppie';\r\nimport { NgxSuperCroppieComponent } from 'ngx-super-croppie';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent implements OnInit {\r\n  @ViewChild('ngxSuperCroppie')\r\n  ngxSuperCroppie: NgxSuperCroppieComponent;\r\n\r\n  public croppieOptions: CroppieOptions = {\r\n    boundary: { width: 220, height: 220 },\r\n    customClass: 'my-class',\r\n    enableExif: true,\r\n    enableOrientation: true,\r\n    enableZoom: true,\r\n    enforceBoundary: true,\r\n    enableResize: false,\r\n    maxZoom: 1,\r\n    minZoom: 0,\r\n    mouseWheelZoom: true,\r\n    showZoomer: true,\r\n    viewport: { width: 200, height: 200, type: 'circle' },\r\n  };\r\n\r\n  public url: string | ArrayBuffer;\r\n\r\n  public points: number[] = [0, 0, 200, 200];\r\n\r\n  public orientation = 1;\r\n\r\n  public zoom = 0;\r\n\r\n  public resultOptions: ResultOptions = {\r\n    type: 'base64',\r\n    size: 'viewport',\r\n    format: 'jpeg',\r\n    quality: 1,\r\n    circle: false,\r\n  };\r\n\r\n  public croppedImage: string | HTMLElement | Blob | HTMLCanvasElement;\r\n\r\n  ngOnInit(): void {\r\n    this.url = null;\r\n  }\r\n\r\n  public updateCroppedImage(\r\n    crop: string | HTMLElement | Blob | HTMLCanvasElement,\r\n  ): void {\r\n    this.croppedImage = crop;\r\n  }\r\n\r\n  public handleFileInput(files: FileList): void {\r\n    if (files.length !== 1) {\r\n      return;\r\n    }\r\n\r\n    const file = files[0];\r\n\r\n    const fileReader = new FileReader();\r\n    fileReader.onloadend = () =\u003e {\r\n      this.url = fileReader.result;\r\n    };\r\n\r\n    fileReader.readAsDataURL(file);\r\n  }\r\n\r\n  public get(): void {\r\n    const data = this.ngxSuperCroppie.get();\r\n    console.log(data);\r\n  }\r\n\r\n  public destroy(): void {\r\n    this.ngxSuperCroppie.destroy();\r\n  }\r\n\r\n  public rotate(): void {\r\n    this.ngxSuperCroppie.rotate(90);\r\n  }\r\n\r\n  public setZoom(): void {\r\n    this.ngxSuperCroppie.setZoom(0.3);\r\n  }\r\n}\r\n```\r\n\r\n### 4. Add ngx-super-croppie to your component.html\r\n\r\n```html\r\n\u003ch1\u003eNgxSuperCroppie Demo\u003c/h1\u003e\r\n\r\nSelect image:\r\n\u003cinput type=\"file\" (change)=\"handleFileInput($event.target.files)\" /\u003e\u003cbr /\u003e\r\n\u003cbutton type=\"button\" (click)=\"get()\"\u003eGet\u003c/button\u003e\r\n\u003cbutton type=\"button\" (click)=\"destroy()\"\u003eDestroy\u003c/button\u003e\r\n\u003cbutton type=\"button\" (click)=\"rotate()\"\u003eRotate 90°\u003c/button\u003e\r\n\u003cbutton type=\"button\" (click)=\"setZoom()\"\u003eZoom 0.3\u003c/button\u003e\r\n\r\n\u003cngx-super-croppie\r\n  *ngIf=\"url\"\r\n  #ngxSuperCroppie\r\n  [croppieOptions]=\"croppieOptions\"\r\n  [url]=\"url\"\r\n  [points]=\"points\"\r\n  [orientation]=\"orientation\"\r\n  [zoom]=\"zoom\"\r\n  [resultOptions]=\"resultOptions\"\r\n  (result)=\"updateCroppedImage($event)\"\r\n\u003e\u003c/ngx-super-croppie\u003e\r\n\r\n\u003cimg\r\n  *ngIf=\"croppedImage\"\r\n  [src]=\"croppedImage\"\r\n  alt=\"cropped image\"\r\n  accept=\"image/gif, image/jpeg, image/jpg, image/png\"\r\n  style=\"border: 2px solid grey\"\r\n/\u003e\r\n```\r\n\r\n## Example\r\n\r\nYou can find a full example under src/app/app.component.ts in this repository.\r\nTo run the example, follow these steps:\r\n\r\n1. Clone the repository:\r\n   `git clone git@github.com:lukaskupczyk/ngx-super-croppie.git`\r\n\r\n2. Install the necessary dependencies:\r\n   `yarn` or `npm install`\r\n\r\n3. Serve angular:\r\n   `yarn start` or `npm run start`\r\n\r\n4. Open the app in your browser:\r\n   [http://localhost:4200](http://localhost:4200)\r\n\r\n## Development\r\n\r\nTo build the module use `yarn build:package`\r\n\r\n## Credit\r\n\r\nngx-super-croppie is inspired by the (unfortunately) unmaintained [ngx-croppie](https://github.com/deej81/ngx-croppie) package.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukaskupczyk%2Fngx-super-croppie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukaskupczyk%2Fngx-super-croppie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukaskupczyk%2Fngx-super-croppie/lists"}