# img-magick

> The power of WASM-ImageMagick as a Webcomponent

Latest version **1.1.1** (published 2020-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install img-magick
pnpm add img-magick
yarn add img-magick
bun add img-magick
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-02-14 |
| First published | 2020-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 4.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Nick Kircos |
| Maintainers | f0urfingeredfish |
| Keywords | webcomponent, imagemagick |

## Links

- npm: https://www.npmjs.com/package/img-magick
- Repository: https://github.com/f0urfingeredfish/img-magick
- Homepage: https://github.com/f0urfingeredfish/img-magick#readme
- Issues: https://github.com/f0urfingeredfish/img-magick/issues
- npm.io page: https://npm.io/package/img-magick

## Dependencies (3)

- [lit-element](https://npm.io/package/lit-element.md) ^2.2.1
- [replace-in-file](https://npm.io/package/replace-in-file.md) ^5.0.2
- [wasm-imagemagick](https://npm.io/package/wasm-imagemagick.md) ^1.2.7

## 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.1.1 (latest) — 2020-02-14
- 1.1.0 — 2020-02-10
- 1.0.4 — 2020-02-05
- 1.0.3 — 2020-02-05
- 1.0.2 — 2020-02-05
- 1.0.1 — 2020-02-04
- 1.0.0 — 2020-02-04

## README

## <img-magick>

A [Web Component](https://www.webcomponents.org/) that gives you the power of [WASM-ImageMagick](https://github.com/KnicKnic/WASM-ImageMagick) with the ease of use of the ```<img>``` tag.

[Live Demo](https://f0urfingeredfish.github.io/img-magick/) Edit the attributes with your dev tools to see live updates!


### Install
```
npm i img-magick
```

### Usage
In a Javascript module
```js
import 'img-magick';
```

In html page:
```html
<script type="module" src="https://unpkg.com/img-magick/dist/img-magick.umd.js"></script>
```
or
```html
<script type="module" src="path/to/bundled/img-magick.js"></script>
```

Add component to appliction or page:
```html
 <img-magick src="./test.png" cmd="convert * -paint 3 -set filename:mysize %t"></img-magick>
```
Results:
![image](https://user-images.githubusercontent.com/399068/73820158-5853f400-47ae-11ea-980e-62a94b30c801.png)

### Attributes

|Attributes|Description|Default|
|---|---|---|
|`cmd`|Any [ImageMagick command](https://imagemagick.org/script/convert.php)| "" |
|`src`|Image URL| "" |
|`showLoader`|Show the loading spinner when processing| false |
|`loaderColor`|Color of the loading indicator| #606060 |
|`loaderSize`|Size of the loader| 25px |

Example with custom loading indicator:
```html
 <img-magick src="./test.png" cmd="convert * -paint 3 -set filename:mysize %t" showLoader loaderSize="100px" loaderColor="red"></img-magick>
```

## For development

### Run polymer server
```
npm install -g polymer-cli && npm install && polymer serve
```
### Start dev server
```
npm run dev
```
Goto http://127.0.0.1:8081/components/img-magick/dev.html

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