{"id":13422194,"url":"https://github.com/flyfloor/react-image-cropper","last_synced_at":"2025-04-10T03:56:54.177Z","repository":{"id":65412065,"uuid":"51903018","full_name":"flyfloor/react-image-cropper","owner":"flyfloor","description":"react image crop","archived":false,"fork":false,"pushed_at":"2023-06-26T06:42:38.000Z","size":1309,"stargazers_count":174,"open_issues_count":26,"forks_count":56,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-10T03:56:49.753Z","etag":null,"topics":["image-cropper","react"],"latest_commit_sha":null,"homepage":"https://braavos.me/react-image-cropper/","language":"JavaScript","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/flyfloor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2016-02-17T07:20:30.000Z","updated_at":"2024-07-03T13:48:06.000Z","dependencies_parsed_at":"2024-06-18T14:08:35.846Z","dependency_job_id":null,"html_url":"https://github.com/flyfloor/react-image-cropper","commit_stats":null,"previous_names":["jerryshew/react-image-cropper"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyfloor%2Freact-image-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyfloor%2Freact-image-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyfloor%2Freact-image-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyfloor%2Freact-image-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flyfloor","download_url":"https://codeload.github.com/flyfloor/react-image-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154999,"owners_count":21056542,"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":["image-cropper","react"],"created_at":"2024-07-30T23:00:38.891Z","updated_at":"2025-04-10T03:56:54.152Z","avatar_url":"https://github.com/flyfloor.png","language":"JavaScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Form Components"],"readme":"\n# collaborators wanted\nI have barely no time work on improve this project, needs collaborators for project maintenance.\n\n## React Image Cropper\n\n[![Downloads](https://img.shields.io/npm/dt/react-image-cropper.svg)](https://www.npmjs.com/package/react-image-cropper)\n[![Version](https://img.shields.io/npm/v/react-image-cropper.svg)](https://www.npmjs.com/package/react-image-cropper)\n\nA React.JS Image Cropper\nTouch supported\n\n**[See the demo](http://braavos.me/react-image-cropper/)**\n\nCustom:\n\n+ initial cropper frame position \n+ frame width, height, ratio\n+ crop event\n\n### Hot to Use\n\n+ `import {Cropper} from 'react-image-cropper'`\n\n+ styles are all inline\n\n+ define Cropper with src, and ref to execute crop method  \n\n```\n\u003cCropper \n    src=\"http://braavos.me/images/posts/college-rock/the-smiths.png\" \n    ref={ ref =\u003e { this.cropper = ref }}\n/\u003e\n```\n\n+ crop and get image url\n\n`image.src = this.cropper.crop()`\n\n+ get crop values:\n\n`const values = this.cropper.values()`\n\nvalues: \n\n```\n{\n    // display values\n    display: {\n        width, // frame width\n        height, // frame height\n        x, // original x position\n        y, // original y position\n        imgWidth, // img width\n        imgHeight, // img height\n    },\n    // original values\n    original: {\n        width, // frame width\n        height, // frame height\n        x, // original x position\n        y, // original y position\n        imgWidth, // img width\n        imgHeight, // img height\n    }\n}\n```\n\n\n+ onChange for preview\n\n(values) =\u003e onChange(values)\n\n+ custom use\n\n| prop  |  value   |\n|:-------:|:--------|\n| ratio | width / height |\n| width | cropper frame width |\n| height | cropper frame height |\n| originX | cropper original position(x axis), accroding to image left|\n| originY | cropper original position(Y axis), accroding to image top|\n| fixedRatio | turn on/off fixed ratio (bool default true) |\n| allowNewSelection | allow user to create a new selection instead of reusing initial selection (bool default true) |\n| styles | specify styles to override inline styles |\n| onImgLoad | specify fuction callback to run when the image completed loading |\n| beforeImgload | specify function callback to run when the image size value is ready but image is not completed loading |\n| onChange | triggred when dragging stop, get values of cropper |\n\n\n**[See the demo](http://braavos.me/react-image-cropper/)**\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflyfloor%2Freact-image-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflyfloor%2Freact-image-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflyfloor%2Freact-image-cropper/lists"}