# imgdata-filter

> > Canvas 实现图片滤镜，效果参考的 https://github.com/picturepan2/instagram.css

Latest version **1.0.4** (published 2020-09-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install imgdata-filter
pnpm add imgdata-filter
yarn add imgdata-filter
bun add imgdata-filter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-09-02 |
| First published | 2020-08-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 279.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ym92 |
| Maintainers | ym92 |
| Keywords | image, imagedata, canvas, context2d, css3, filter |

## Links

- npm: https://www.npmjs.com/package/imgdata-filter
- Homepage: https://github.com/ethanyu123/imgdata-filter
- npm.io page: https://npm.io/package/imgdata-filter

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

- 1.0.4 (latest) — 2020-09-02
- 1.0.3 — 2020-09-02
- 1.0.2 — 2020-09-02
- 1.0.2-5 — 2020-09-02
- 1.0.2-4 — 2020-08-27
- 1.0.2-3 — 2020-08-27
- 1.0.2-2 — 2020-08-27
- 1.0.2-1 — 2020-08-27
- 1.0.2-0 — 2020-08-27
- 1.0.1 — 2020-08-27

## README

# imgdata-filter

> Canvas 实现图片滤镜，效果参考的 https://github.com/picturepan2/instagram.css

![预览图](https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2020-9/1599034977875/31b568a2dccf.png)

## Getting started

### Installation

```shell
npm install imgdata-filter
```

### Usage
#### Syntax
```js
    import { filter1977 } from 'imgdata-filter';

    filter1977(canvas, context);
```
- **canvas**
  - Type: `HTMLCanvasElement`

- **context**
  - Type: `CanvasRenderingContext2D`

#### Example
```html
    <!-- html -->
    <img id='image' src=''>

    <canvas id='1977'></canvas>
```
```js
    // js
    import {
        filter1977,
        ...
    } from 'imgdata-filter';

    const origin = document.getElementById('image');
    const img = new Image();

    window.onload = () => {
        img.addEventListener('load', imgOnload, false);
        img.src = './image/instagram.jpg';
        origin.src = img.src;
    }

    const imgOnload = () => {
        const canvas = document.getElementById('canvas');
        canvas.width = origin.width;
        canvas.height = origin.height;

        const context = canvas.getContext('2d');
        context.drawImage(img,
            0,
            0,
            img.width,
            img.height,
            0,
            0,
            canvas.width,
            canvas.height
        );

        const imgData = filter1977(canvas, context);

        // ...
    }
```
### Development
```shell
npm run dev
```

---
_Source: https://npm.io/package/imgdata-filter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._