1.1.1 • Published 4 years ago
img-magick v1.1.1
<img-magick>
A Web Component that gives you the power of WASM-ImageMagick with the ease of use of the <img>
tag.
Live Demo Edit the attributes with your dev tools to see live updates!
Install
npm i img-magick
Usage
In a Javascript module
import 'img-magick';
In html page:
<script type="module" src="https://unpkg.com/img-magick/dist/img-magick.umd.js"></script>
or
<script type="module" src="path/to/bundled/img-magick.js"></script>
Add component to appliction or page:
<img-magick src="./test.png" cmd="convert * -paint 3 -set filename:mysize %t"></img-magick>
Results:
Attributes
Attributes | Description | Default |
---|---|---|
cmd | Any ImageMagick command | "" |
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:
<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