{"id":15019454,"url":"https://github.com/hggeorgiev/ngx-image-editor","last_synced_at":"2025-05-02T07:32:01.074Z","repository":{"id":56142982,"uuid":"104566735","full_name":"hggeorgiev/ngx-image-editor","owner":"hggeorgiev","description":"Awesome image editor for Angular 6","archived":false,"fork":false,"pushed_at":"2020-11-24T15:24:31.000Z","size":1904,"stargazers_count":72,"open_issues_count":11,"forks_count":36,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-29T23:13:38.291Z","etag":null,"topics":["angular-image-editor","angular4","angular5","angular6","crop","editor","image"],"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/hggeorgiev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-23T12:43:06.000Z","updated_at":"2024-08-28T17:57:35.000Z","dependencies_parsed_at":"2022-08-15T13:31:04.985Z","dependency_job_id":null,"html_url":"https://github.com/hggeorgiev/ngx-image-editor","commit_stats":null,"previous_names":["centroida/ngx-image-editor"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2Fngx-image-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2Fngx-image-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2Fngx-image-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2Fngx-image-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hggeorgiev","download_url":"https://codeload.github.com/hggeorgiev/ngx-image-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224253615,"owners_count":17280930,"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-image-editor","angular4","angular5","angular6","crop","editor","image"],"created_at":"2024-09-24T19:53:30.338Z","updated_at":"2024-11-12T16:03:32.973Z","avatar_url":"https://github.com/hggeorgiev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg  style=\"text-align: center;\" src=\"https://github.com/Centroida/ngx-image-editor/raw/master/assets/editor.png\"\u003e\n  \u003ch1 align=\"center\"\u003engx-image-editor\u003c/h1\u003e\n\u003c/p\u003e\n\n\nAwesome editor for Angular 6 based on [Angular Material](https://github.com/angular/material2)\n\n[![npm version](https://badge.fury.io/js/ngx-image-editor.svg)](https://badge.fury.io/js/ngx-image-editor)\n[![Build Status](https://travis-ci.org/Centroida/ngx-image-editor.svg?branch=master)](https://travis-ci.org/hggeorgiev/ngx-image-editor)\n\n**[Live Demo on Slackblitz](https://stackblitz.com/edit/ngx-image-editor-demo)**\n\n## Getting started\n\n##### Step 1: Install Angular Material (+ Material Icons) and Angular Flex Layout\n\n- [Angular Material](https://material.angular.io/guide/getting-started)\n- [Angular Flex-Layout](https://github.com/angular/flex-layout)\n\n##### Step 2: Install cropperjs\n    \n```bash\n    yarn add cropperjs\n```\n##### Step 3: Add `cropperjs` file paths in your `.angular.json`\n      \n```json\n}\n       \"styles\": [\n         \"node_modules/cropperjs/dist/cropper.css\"\n       ],\n       \"scripts\": [\n         \"node_modules/cropperjs/dist/cropper.js\"\n       ]\n}\n```\n\n\n#####  Step 4: Install `ngx-image-editor`:\n```bash\n   yarn add ngx-image-editor\n```\n    \n##### Step 5: Import the `NgxImageEditorModule` within your app:\n```js\n      import {NgxImageEditorModule} from \"ngx-image-editor\";\n\n      @NgModule({\n        imports: [\n          NgxImageEditorModule\n        ]\n      })\n```\n\n\n##### Step 6: Use within your application:\n```html\n   \u003cngx-image-editor [config]=\"yourConfig\"\u003e\u003c/ngx-image-editor\u003e\n```\n\n### API\n\n   | Property          | Description                                                    |\n   | -------------- | -------------------------------------------------------------- |\n   | `[config]`         | An object containing editor configuration (see **Configuration**)                  |\n   | `(file)` | The emitted file after editing.         |\n\n\n#### Configuration\n| Property          | Description                                                    |\n| -------------- | -------------------------------------------------------------- |\n| ImageName         | Name of the image.             |\n| ImageUrl | URL of the image (if it coming from a CDN) .           |\n| File | File object of the image (if it is being uploaded through the browser.          |\n| ImageType    | Type of the image (default is `image/jpeg`).            |\n| AspectRatios | Array of aspect ratios. Available options: `0:0`, `1:1` , `2:3` ,`4:3`, `16:9`l . (default is `0:0`)             |\n\n\n### Example\n\n```typescript\n\n@Component({\n  selector: 'app-root',\n   styleUrls: ['./app.component.css']\n  template: `\n      \u003cngx-image-editor\n        [config]=\"config\"\n        (close)=\"close($event)\"\n        (file)=\"getEditedFile($event)\"\u003e\n      \u003c/ngx-image-editor\u003e\n\n  `,\n\n})\nexport class AppComponent {\n  public config = {\n    ImageName: 'Some image',\n    AspectRatios: [\"4:3\", \"16:9\"],\n    ImageUrl: 'https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg',\n    ImageType: 'image/jpeg'\n  }\n\n  public close() {\n    // Fired when the editor is closed.\n  }\n\n  public getEditedFile(file: File) {\n    // Fired when the file has been processed.\n  }\n}\n\n\n```\n\n\n### Contributors\n\n| [![Hristo Georgiev](https://github.com/hggeorgiev.png?size=100)](https://github.com/hggeorgiev) | [![Taulant Disha](https://github.com/taulantdisha.png?size=100)](https://github.com/taulantdisha) |\n|---------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------|\n| [Hristo Georgiev](https://github.com/hggeorgiev)                                                | [Taulant Disha](https://github.com/taulantdisha)                                              |\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhggeorgiev%2Fngx-image-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhggeorgiev%2Fngx-image-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhggeorgiev%2Fngx-image-editor/lists"}