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

    Install

    npm i img-magick

    DownloadsWeekly Downloads

    12

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    4.66 MB

    Total Files

    8

    Last publish

    Collaborators

    • f0urfingeredfish