img-magick

1.1.1 • Public • Published

<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: image

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

Goto http://127.0.0.1:8081/components/img-magick/dev.html

Package Sidebar

Install

npm i img-magick

Weekly Downloads

4

Version

1.1.1

License

MIT

Unpacked Size

4.66 MB

Total Files

8

Last publish

Collaborators

  • f0urfingeredfish