{"repo":"github/image-crop-element","free":true,"listed":false,"github":"https://github.com/github/image-crop-element","clone":"git clone https://github.com/github/image-crop-element.git","description":"A custom element for cropping a square image. Returns x, y, width, and height.","language":"TypeScript","stars":198,"topics":["image-cropper","image-crop","custom-elements","web-components"],"license":"MIT","category":"ui-components","readme_excerpt":"&lt;image-crop-element&gt; This 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. Installation Usage Plain Rounded crop area With loading state With autoupdate inputs Listen to the change event CSS encapsulation The elements HTML structure is initialized in a 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. Browser support Browsers without native [custom element support][support] require a [polyfill][]. Legacy browsers require various other polyfills. See [ examples/index.html ][example] for details. [example]: https://github.com/github/image-crop-element/blob/57080ad88d26e05b42fa10a95470da8035f53967/examples/polyfill.html#L17-L22 - Chrome - Firefox - Safari - Microsoft Edge [support]: https://caniuse.com/#feat=custom-elementsv1 [polyfill]: https://github.com/webcomponents/custom-elements","default_branch":null,"files":null,"tree":[],"storefront":"/r/github","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/github/image-crop-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}