{"id":13481125,"url":"https://github.com/cstefanache/angular2-img-cropper","last_synced_at":"2025-04-12T16:39:10.969Z","repository":{"id":57159330,"uuid":"55121156","full_name":"cstefanache/angular2-img-cropper","owner":"cstefanache","description":"Angular 2 Image Cropper","archived":false,"fork":false,"pushed_at":"2018-03-15T12:43:49.000Z","size":632,"stargazers_count":365,"open_issues_count":106,"forks_count":135,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-04-14T13:04:27.785Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cstefanache.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}},"created_at":"2016-03-31T04:51:32.000Z","updated_at":"2023-12-19T17:38:47.000Z","dependencies_parsed_at":"2022-09-08T10:40:20.032Z","dependency_job_id":null,"html_url":"https://github.com/cstefanache/angular2-img-cropper","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Fangular2-img-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Fangular2-img-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Fangular2-img-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Fangular2-img-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cstefanache","download_url":"https://codeload.github.com/cstefanache/angular2-img-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248598053,"owners_count":21131005,"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-07-31T17:00:48.921Z","updated_at":"2025-04-12T16:39:10.947Z","avatar_url":"https://github.com/cstefanache.png","language":"TypeScript","readme":"# This repo is deprecated, but will be maintained by web-dave at https://github.com/web-dave/ngx-img-cropper\n\n# ng2-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 ng2-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## 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 'ng2-img-cropper';\n\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\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\n```\n\nCheckout this [sample plunker](https://embed.plnkr.co/VFwGvAO6MhV06IDTLk5W/)\n\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 control the corner markers' size\n* **showCenterMarker**:*boolean* (default: true) - if true, the drag center marker is visible\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\n\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```\n\n\n\n# Changelog\n\n### Release 0.8.6\n - Dist package cleanup (PR by: @leosvelperez)\n\n### Release 0.8.4\n - Made compatible with Angular 4 \u0026\u0026 AOT\n\n### Release 0.8.2\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 - 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 - Fixed #87 get unsacled crop of image\n\n\n### Release 0.7.0\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 - 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\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 - 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:\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 'ng2-img-cropper' :           { main: 'index.js', defaultExtension: 'js' }\n```\n\n","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstefanache%2Fangular2-img-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcstefanache%2Fangular2-img-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstefanache%2Fangular2-img-cropper/lists"}