{"id":19032645,"url":"https://github.com/bitbravo/ngx-img-cropper","last_synced_at":"2026-06-18T12:32:25.557Z","repository":{"id":120975056,"uuid":"140329746","full_name":"BitBravo/ngx-img-cropper","owner":"BitBravo","description":"Image cropping tool for Angular","archived":false,"fork":false,"pushed_at":"2018-07-09T19:18:11.000Z","size":25358,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-21T20:36:38.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/BitBravo.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}},"created_at":"2018-07-09T18:58:17.000Z","updated_at":"2018-07-09T19:18:19.000Z","dependencies_parsed_at":"2024-02-01T12:43:31.043Z","dependency_job_id":null,"html_url":"https://github.com/BitBravo/ngx-img-cropper","commit_stats":null,"previous_names":["bitbravo/ngx-img-cropper"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BitBravo/ngx-img-cropper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fngx-img-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fngx-img-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fngx-img-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fngx-img-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BitBravo","download_url":"https://codeload.github.com/BitBravo/ngx-img-cropper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fngx-img-cropper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34491227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-08T21:29:48.425Z","updated_at":"2026-06-18T12:32:25.533Z","avatar_url":"https://github.com/BitBravo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-img-cropper\n\n## I inherited this project from cstefanache [angular2-img-cropper](https://github.com/cstefanache/angular2-img-cropper)\n\nThis is an adapatation of Angular 1 image cropper from: https://github.com/AllanBishop/angular-img-cropper\nAn image cropping tool for AngularJS. Features a rectangular crop area. The crop area's aspect ratio can be enforced during dragging.\nThe crop image can either be 1:1 or scaled to fit an area.\n\n## Install from NPM\n\n```\n    npm i ngx-img-cropper --save\n```\n\n## Screenshot\n\n![Screenshot](https://raw.githubusercontent.com/cstefanache/cstefanache.github.io/master/assets/img/cropper.png \"Screenshot\")\n\n## contributing\n\n```\ngit clone\nnpm i\nnpm start\n```\n\nDo your magic\n\ncreate a branch for your feature and send a PR \u003cbr\u003e\nLet's do awesome stuff!\n\n## Testing\n\n```\n    npm install\n    npm run all\n```\n\n## Example usage\n\n```typescript\nimport { Component } from \"angular2/core\";\nimport { ImageCropperComponent, CropperSettings } from \"ngx-img-cropper\";\n\n@Component({\n  selector: \"test-app\",\n  template: `\u003cdiv\u003e\n        \u003cimg-cropper [image]=\"data\" [settings]=\"cropperSettings\"\u003e\u003c/img-cropper\u003e\u003cbr\u003e\n        \u003cimg [src]=\"data.image\" [width]=\"cropperSettings.croppedWidth\" [height]=\"cropperSettings.croppedHeight\"\u003e\n    \u003c/div\u003e`,\n  declarations: [ImageCropperComponent]\n})\nexport class AppComponent {\n  data: any;\n  cropperSettings: CropperSettings;\n\n  constructor() {\n    this.cropperSettings = new CropperSettings();\n    this.cropperSettings.width = 100;\n    this.cropperSettings.height = 100;\n    this.cropperSettings.croppedWidth = 100;\n    this.cropperSettings.croppedHeight = 100;\n    this.cropperSettings.canvasWidth = 400;\n    this.cropperSettings.canvasHeight = 300;\n\n    this.data = {};\n  }\n}\n```\n\nCheckout this [sample plunker](https://embed.plnkr.co/VFwGvAO6MhV06IDTLk5W/)\n\n## Settings\n\n* **canvasWidth**:_number_ - Canvas DOM Element width\n* **canvasHeight**:_number_ - Canvas DOM Element height\n* **width**:_number_ - Crop Width\n* **height**:_number_ - Crop Height\n* **minWidth**:_number_ - Minimum crop Width\n* **minHeight**:_number_ - Minimum crop height\n* **croppedWidth**:_number_ - Resulting image width\n* **croppedHeight**:_number_ - Resulting image height\n* **touchRadius**:_number_ - (default: 20) Touch devices radius for the corner markers\n* **centerTouchRadius**:_number_ (default: 20) - Touch devices radius for the drag center marker\n* **minWithRelativeToResolution**:_boolean_ - (default: true) By default the resulting image will be cropped from original image. If false, it will be cropped from canvas pixels\n* **noFileInput**:_boolean_ - (default: false) - hides the file input element from cropper canvas.\n* **cropperDrawSettings**:_CropperDrawSettings_ - rendering options\n  * **strokeWidth**:_number_ - box/ellipsis stroke width\n  * **strokeColor**:_string_ - box/ellipsis stroke color\n* **allowedFilesRegex**:_RegExp_ - (default: /\\.(jpe?g|png|gif)$/i) - Regex for allowed images\n* **preserveSize**:_boolean_ - will not scale the resulting image to the croppedWidth/croppedHeight and will output the exact crop size from original\n* **fileType**:_string_ - if defined all images will be converted to desired format. sample: cropperSample.fileType = 'image/jpeg'\n* **compressRatio**:_number_ (default: 1.0) - default compress ratio\n* **dynamicSizing**: (default: false) - if true then the cropper becomes responsive - might introduce performance issues on resize\n* **cropperClass**: string - set class on canvas element\n* **croppingClass**: string - appends class to cropper when image is set (#142)\n* **resampleFn**: Function(canvas) - function used to resample the cropped image (#136); - see example #3 from runtime sample app\n* **cropOnResize**:_boolean_ (default: true) - if true the cropper will create a new cropped Image object immediately when the crop area is resized\n* **markerSizeMultiplier**:_number_ (default: 1) - A variable that controls the corner markers' size\n* **showCenterMarker**:_boolean_ (default: true) - if true, the drag center marker is visible\n* **keepAspect**:_boolean_ (default: true) - if true, the aspect ratio of `width` and `height` of the crop window is retained during resizing\n\n## Customizing Image cropper\n\nReplacing component file input:\n\n```html\n\u003cdiv class=\"file-upload\"\u003e\n    \u003cspan class=\"text\"\u003eupload\u003c/span\u003e\n    \u003cinput id=\"custom-input\" type=\"file\" (change)=\"fileChangeListener($event)\"\u003e\n\u003c/div\u003e\n\u003cimg-cropper #cropper [image]=\"data\" [settings]=\"cropperSettings\"\u003e\u003c/img-cropper\u003e\n\u003cbr\u003e\n\u003cspan class=\"result rounded\" *ngIf=\"data.image\" \u003e\n    \u003cimg [src]=\"data.image\" [width]=\"cropperSettings.croppedWidth\" [height]=\"cropperSettings.croppedHeight\"\u003e\n\u003c/span\u003e\n```\n\n```typescript\ndata:any;\n\n@ViewChild('cropper', undefined)\ncropper:ImageCropperComponent;\n\nconstructor() {\n    this.cropperSettings = new CropperSettings();\n    this.cropperSettings.noFileInput = true;\n    this.data = {};\n}\n\nfileChangeListener($event) {\n    var image:any = new Image();\n    var file:File = $event.target.files[0];\n    var myReader:FileReader = new FileReader();\n    var that = this;\n    myReader.onloadend = function (loadEvent:any) {\n        image.src = loadEvent.target.result;\n        that.cropper.setImage(image);\n\n    };\n\n    myReader.readAsDataURL(file);\n}\n```\n\n# ToDo:\n\n* write tests\n\n# Changelog\n\n### Release 0.10.2\n\n* IOS Fix\n\n* Angular 5 support\n\n### Release 0.10.1\n\n### Release 0.10.0\n\n### Release 0.9.2\n\n* Angular 5 support\n\n### Release 0.8.9\n\nFix for #36 - Add button to crop\nFix for #186 - Handle Hi-Res images\nFix for #92 - IOS crop issue\n\n### Release 0.8.6\n\n* Dist package cleanup (PR by: @leosvelperez)\n\n### Release 0.8.4\n\n* Made compatible with Angular 4 \u0026\u0026 AOT\n\n### Release 0.8.2\n\n* CR: #148 - removed ts files from output package.\n* fix for #150 - made fileType undefined as default. if defined it will enforce output format\n\n### Release 0.8.1\n\n* added dynamicSizing, cropperClass for responsive purposes\n\n### Release 0.8\n\n* added reset() method on ImageCropperComponent - fix for #118\n* added compressRatio as parameter in the cropper settings\n\n### Release 0.7.6\n\n* 21 Bugs in the code, I fixed 3, (hopefully not) 30 Bugs in the code\n\n### Release 0.7.1\n\n* Fixed #87 get unsacled crop of image\n\n### Release 0.7.0\n\n* update for AngularJS 2.0.1\n* removed typings\n* fixed aspect ratio issue\n* made cropper property public\n* added onmouseleave behavior\n\n### Release 0.6.1\n\n* Fixed issue #49 - Error on reading exif\n\n### Release 0.6.0\n\n* Parsed EXIF information for image orientation\n* fixed multiple browser compatibility issues\n* added accepted files regex\n* updated to Angular RC5\n\n### Release 0.5.0\n\n* introduced flag to hide the component file input in order to allow customization\n* added pinch/zoom feature for touch devices\n\n### Release 0.4.5:\n\n* introduced rounded cropper: cropperSettings.rounded = true. Making keep aspect = false will throw an error on rounded cropper. (Issue #14)\n* cropper takes into consideration source image data pixels not cropper image data. (Issue #17)\n* support for minSize now have the following option: minWithRelativeToResolution. When set to false it will keep min size relative to canvas size. (Issue #21)\n* allow user to customize look and feel of the cropper:\n   this.cropperSettings.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';\n  this.cropperSettings.cropperDrawSettings.strokeWidth = 2;\n\n### Release 0.4.2:\n\nStarting with: 0.4.2 ts files are no loger published (only js \u0026 d.ts).\nPlease change your system.config files to make use of the js files.\n\n```\n 'ngx-img-cropper' :           { main: 'index.js', defaultExtension: 'js' }\n```\n\n## Build\n\nshould work with one of these\n\n```\n \"release:patch\": \"npm version patch \u0026\u0026 npm run release\",\n \"release:minor\": \"npm version minor \u0026\u0026 npm run release\",\n \"release:major\": \"npm version major \u0026\u0026 npm run release\",\n```\n\nSteps:\n\n1.  npm test (no tests yet)\n2.  npm run build\n3.  git commit -am \\\"Prerelease updates\\\"\n4.  git checkout -b release\n5.  git add -f ./\n6.  git push --tags\n7.  git checkout master\n8.  git branch -D release\n9.  git push\n10. npm run copy:release\n11. cd dist\n12. npm publish\n13. cd ..\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitbravo%2Fngx-img-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitbravo%2Fngx-img-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitbravo%2Fngx-img-cropper/lists"}