{"id":15048075,"url":"https://github.com/github/image-crop-element","last_synced_at":"2025-05-14T21:06:53.054Z","repository":{"id":33115224,"uuid":"109926111","full_name":"github/image-crop-element","owner":"github","description":"A custom element for cropping a square image. Returns x, y, width, and height.","archived":false,"fork":false,"pushed_at":"2025-04-09T13:22:33.000Z","size":3167,"stargazers_count":186,"open_issues_count":4,"forks_count":23,"subscribers_count":252,"default_branch":"main","last_synced_at":"2025-04-13T17:46:52.279Z","etag":null,"topics":["custom-elements","image-crop","image-cropper","web-components"],"latest_commit_sha":null,"homepage":"https://github.github.io/image-crop-element/examples/","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/github.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":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-11-08T04:05:26.000Z","updated_at":"2025-03-29T14:11:58.000Z","dependencies_parsed_at":"2024-06-18T13:54:12.320Z","dependency_job_id":"72eccc20-8c7c-4163-96b1-8e193a0c3c4f","html_url":"https://github.com/github/image-crop-element","commit_stats":{"total_commits":209,"total_committers":10,"mean_commits":20.9,"dds":"0.43540669856459335","last_synced_commit":"5eae867f7267f2a0725a73e750567167ae67c7d0"},"previous_names":["muan/image-crop-element"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fimage-crop-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fimage-crop-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fimage-crop-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fimage-crop-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/github","download_url":"https://codeload.github.com/github/image-crop-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227612,"owners_count":22035669,"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":["custom-elements","image-crop","image-cropper","web-components"],"created_at":"2024-09-24T21:07:46.169Z","updated_at":"2025-05-14T21:06:48.037Z","avatar_url":"https://github.com/github.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;image-crop-element\u0026gt;\n\nThis loads an image and creates a crop area that user can modify. An event is fired with x, y, width, and height as the crop area changes.\n\n## Installation\n\n```\n$ npm install --save @github/image-crop-element\n```\n\n## Usage\n\n### Plain\n\n```html\n\u003cimage-crop src=\"/avatar.jpg\"\u003e\u003c/image-crop\u003e\n```\n\n### Rounded crop area\n\n```html\n\u003cimage-crop src=\"/avatar.jpg\" rounded\u003e\u003c/image-crop\u003e\n```\n\n### With loading state\n\n```html\n\u003cimage-crop src=\"/avatar.jpg\"\u003e\n  \u003cimg src=\"spinner.gif\" alt=\"\" data-loading-slot /\u003e\n\u003c/image-crop\u003e\n```\n\n### With autoupdate inputs\n\n```html\n\u003cimage-crop src=\"/avatar.jpg\"\u003e\n  \u003cinput type=\"hidden\" data-image-crop-input=\"x\" name=\"x\"\u003e\n  \u003cinput type=\"hidden\" data-image-crop-input=\"y\" name=\"y\"\u003e\n  \u003cinput type=\"hidden\" data-image-crop-input=\"width\" name=\"width\"\u003e\n  \u003cinput type=\"hidden\" data-image-crop-input=\"height\" name=\"height\"\u003e\n\u003c/image-crop\u003e\n```\n\n### Listen to the change event\n\n```javascript\ndocument.addEventListener('image-crop-change', function (event){\n  console.log(\n    'Crop area changed.',\n    event.detail.x,\n    event.detail.y,\n    event.detail.width,\n    event.detail.height\n  )\n})\n```\n\n## CSS encapsulation\nThe elements HTML structure is initialized in a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so it is impossible to apply CSS to it. If you need to change the element's default style for any reason, you should open up a new issue (or a pull request!), describing your use case, and we'll work with you on solving the problem.\n\n## Browser support\n\nBrowsers without native [custom element support][support] require a [polyfill][]. Legacy browsers require various other polyfills. See [`examples/index.html`][example] for details.\n\n[example]: https://github.com/github/image-crop-element/blob/57080ad88d26e05b42fa10a95470da8035f53967/examples/polyfill.html#L17-L22\n\n- Chrome\n- Firefox\n- Safari\n- Microsoft Edge\n\n[support]: https://caniuse.com/#feat=custom-elementsv1\n[polyfill]: https://github.com/webcomponents/custom-elements\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fimage-crop-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithub%2Fimage-crop-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fimage-crop-element/lists"}