# @github/image-crop-element

> Select area for cropping an image. This does not actually crop.

Latest version **5.0.0** (published 2021-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @github/image-crop-element
pnpm add @github/image-crop-element
yarn add @github/image-crop-element
bun add @github/image-crop-element
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2021-04-16 |
| First published | 2018-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 198 |
| Maintainers | smockle, trevorsg, emplums, jonrohan, broccolini, mislav, mdo, primer-css, keithamus, mschoening, koddsson, emilybrick, lgarron, zeke, anuraag016, colebemis |
| Keywords | crop, image, custom element |

## Links

- npm: https://www.npmjs.com/package/@github/image-crop-element
- Repository: https://github.com/github/image-crop-element
- Homepage: https://github.com/github/image-crop-element#readme
- Issues: https://github.com/github/image-crop-element/issues
- npm.io page: https://npm.io/package/@github/image-crop-element

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 5.0.0 (latest) — 2021-04-16
- 4.1.1 — 2021-03-15
- 4.1.0 — 2020-12-02
- 4.0.0 — 2020-11-05
- 3.0.8 — 2020-02-28
- 3.0.7 — 2020-01-20
- 3.0.6 — 2019-11-05
- 3.0.5 — 2019-09-12
- 3.0.4 — 2019-08-16
- 3.0.3 — 2019-08-07
- 3.0.2 — 2019-08-01
- 3.0.1 — 2019-07-02
- 3.0.0 — 2019-06-06
- 2.0.0 — 2019-02-25
- 1.1.1 — 2018-06-22
- … 1 more at https://npm.io/package/@github/image-crop-element/versions

## 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
<image-crop src="/avatar.jpg"></image-crop>
```

### Rounded crop area

```html
<image-crop src="/avatar.jpg" rounded></image-crop>
```

### With loading state

```html
<image-crop src="/avatar.jpg">
  <img src="spinner.gif" alt="" data-loading-slot />
</image-crop>
```

### With autoupdate inputs

```html
<image-crop src="/avatar.jpg">
  <input type="hidden" data-image-crop-input="x" name="x">
  <input type="hidden" data-image-crop-input="y" name="y">
  <input type="hidden" data-image-crop-input="width" name="width">
  <input type="hidden" data-image-crop-input="height" name="height">
</image-crop>
```

### 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

---
_Source: https://npm.io/package/@github/image-crop-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._