open-index/open-npm huggingface dataset:
npm package: @image-auto-crop/angular
Description: ![npm](https://img.shields.io/npm/v/%40image-auto-crop%2Fangular)
Latest version: 0.0.1-alpha.4

# @image-auto-crop/angular

![npm](https://img.shields.io/npm/v/%40image-auto-crop%2Fangular)

An Angular wrapper for [image-auto-crop](https://github.com/wentaoliu/image-auto-crop).

## Install

Install with the peer dependency `@image-auto-crop/core`:

```
npm i @image-auto-crop/core @image-auto-crop/angular
```

## Usage

This package provides an `ImageAutoCropDirective` directive which can be applied to a standard `img` element.

Example:

```ts
import { ImageAutoCropDirective } from '@image-auto-crop/angular';

@Component({
  imports: [ImageAutoCropDirective],
  ...
})
```

```html
<img autoCrop src="example.png" alt="Example" />
```
npm package: @image-auto-crop/core
Description: The core package of [image-auto-crop](https://github.com/wentaoliu/image-auto-crop).
Latest version: 0.0.1-alpha.4

# @image-auto-crop/core

The core package of [image-auto-crop](https://github.com/wentaoliu/image-auto-crop).

It is recommended to use one of the wrappers, rather than use this package directly:

- [Web Component (@image-auto-crop/web)](https://www.npmjs.com/package/@image-auto-crop/web)
- [React (@image-auto-crop/react)](https://www.npmjs.com/package/@image-auto-crop/react)
- [Angular (@image-auto-crop/angular)](https://www.npmjs.com/package/@image-auto-crop/angular)

## Install

```
npm i @image-auto-crop/core
```

## Usage

This package provides a `autoCropImage` function which takes the path of the image (the `src` attribute of an `img` element) and returns the cropped image data as a base64 string:

```ts
import { autoCropImage } from '@image-auto-crop/core';

...

const src = 'example.png';
const imageData = await autoCropImage(src);
console.log(imageData);
// data:image/png;base64,iVBOR...
```
npm package: @image-auto-crop/react
Description: ![npm](https://img.shields.io/npm/v/%40image-auto-crop%2Freact)
Latest version: 0.0.1-alpha.4

# @image-auto-crop/react

![npm](https://img.shields.io/npm/v/%40image-auto-crop%2Freact)

A React wrapper for [image-auto-crop](https://github.com/wentaoliu/image-auto-crop).

## Install

Install with the peer dependency `@image-auto-crop/core`:

```
npm i @image-auto-crop/core @image-auto-crop/react
```

## Usage

This package provides an `ImageAutoCrop` React component which can be a drop-in replacement of a standard `img` element.

Example:

```tsx
import { ImageAutoCrop } from '@image-auto-crop/react';

<ImageAutoCrop src="example.png" alt="Example" />
```
npm package: @image-auto-crop/web
Description: ![npm](https://img.shields.io/npm/v/%40image-auto-crop%2Fweb)
Latest version: 0.0.1-alpha.4

# @image-auto-crop/web

![npm](https://img.shields.io/npm/v/%40image-auto-crop%2Fweb)

A Web Component wrapper for [image-auto-crop](https://github.com/wentaoliu/image-auto-crop).

## Install

Install with the peer dependency `@image-auto-crop/core`:

```
npm i @image-auto-crop/core @image-auto-crop/web
```

## Usage

This package provides an custom element which extends the standard `img` element.

Example:

```js
import '@image-auto-crop/web';
```

```html
<img is="auto-crop" src="example.png" alt="Example" />
```