{"id":13580574,"url":"https://github.com/web-dave/ngx-img-cropper","last_synced_at":"2025-05-16T04:03:40.719Z","repository":{"id":29272211,"uuid":"120871895","full_name":"web-dave/ngx-img-cropper","owner":"web-dave","description":"Image cropping tool for Angular","archived":false,"fork":false,"pushed_at":"2025-04-21T13:54:38.000Z","size":29920,"stargazers_count":193,"open_issues_count":3,"forks_count":47,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-21T14:54:36.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web-dave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2018-02-09T07:22:13.000Z","updated_at":"2025-04-16T15:30:15.000Z","dependencies_parsed_at":"2024-01-10T08:44:35.295Z","dependency_job_id":"fac9058a-16f9-4e84-808b-73836463ad5d","html_url":"https://github.com/web-dave/ngx-img-cropper","commit_stats":{"total_commits":335,"total_committers":54,"mean_commits":6.203703703703703,"dds":0.7074626865671642,"last_synced_commit":"cc5bd848a39b04ea402c131f3d3f990099b7cf6a"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-dave%2Fngx-img-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-dave%2Fngx-img-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-dave%2Fngx-img-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-dave%2Fngx-img-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-dave","download_url":"https://codeload.github.com/web-dave/ngx-img-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"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":[],"created_at":"2024-08-01T15:01:53.219Z","updated_at":"2025-05-16T04:03:40.701Z","avatar_url":"https://github.com/web-dave.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Third Party Components"],"sub_categories":["Images"],"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: `\n    \u003cdiv\u003e\n      \u003cimg-cropper [image]=\"data\" [settings]=\"cropperSettings\"\u003e\u003c/img-cropper\n      \u003e\u003cbr /\u003e\n      \u003cimg\n        [src]=\"data.image\"\n        [width]=\"cropperSettings.croppedWidth\"\n        [height]=\"cropperSettings.croppedHeight\"\n      /\u003e\n    \u003c/div\u003e\n  `,\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- **rounded**:_boolean_ (default: false) - if true, the cropper will be a circle.\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\n    [src]=\"data.image\"\n    [width]=\"cropperSettings.croppedWidth\"\n    [height]=\"cropperSettings.croppedHeight\"\n  /\u003e\n\u003c/span\u003e\n```\n\n```typescript\ndata:any;\n\n@ViewChild('cropper')\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 ^10.0.8\n\n- @angular ^7.2.0\n\n### Release 7.0.0\n\n- Build with @angular/cli\n- @angular ^7.2.0\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%2Fweb-dave%2Fngx-img-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-dave%2Fngx-img-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-dave%2Fngx-img-cropper/lists"}