https://github.com/github/image-crop-element
A custom element for cropping a square image. Returns x, y, width, and height.
https://github.com/github/image-crop-element
custom-elements image-crop image-cropper web-components
Last synced: 10 months ago
JSON representation
A custom element for cropping a square image. Returns x, y, width, and height.
- Host: GitHub
- URL: https://github.com/github/image-crop-element
- Owner: github
- License: mit
- Created: 2017-11-08T04:05:26.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-04-09T13:22:33.000Z (11 months ago)
- Last Synced: 2025-04-13T17:46:52.279Z (11 months ago)
- Topics: custom-elements, image-crop, image-cropper, web-components
- Language: TypeScript
- Homepage: https://github.github.io/image-crop-element/examples/
- Size: 3.02 MB
- Stars: 186
- Watchers: 252
- Forks: 23
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# <image-crop-element>
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
```
$ npm install --save @github/image-crop-element
```
## Usage
### Plain
```html
```
### Rounded crop area
```html
```
### With loading state
```html
```
### With autoupdate inputs
```html
```
### Listen to the change event
```javascript
document.addEventListener('image-crop-change', function (event){
console.log(
'Crop area changed.',
event.detail.x,
event.detail.y,
event.detail.width,
event.detail.height
)
})
```
## CSS encapsulation
The 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.
## 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