@zenoo/image-resize

    0.1.2 • Public • Published

    ImageResize (Demo)

    Resize your Image object or image inputs easily

    Doc

    • Installation

    Simply import ImageResize into your HTML.

    
    <script src="https://unpkg.com/@zenoo/image-resize@0.1.1/ImageResize.min.js"></script>
    
    • How to use

    Create a new ImageResize object:

    // Empty image processor
    const resizer = new ImageResize()
        .maxWidth(200)
        .process('yourImageURL')
        .then(resizedImage => {
            document.body.appendChild(resizedImage);
        });
    
    // OR
    
    // Processor linked to a file input
    const resizer = new ImageResize({
        source: document.querySelector('input.image'),
        maxWidth: 50,
        maxHeight: 50,
        onResize: resizedImage => {
            document.body.appendChild(resizedImage);
        }
    });
    
    • Options
    {
      source: yourImage,            // Your file input (String selector or Element)
      maxWidth: 50,                 // Max width
      maxHeight: 50,                // Max height
      width: 50,                    // Fixed width (You'll usually use either maxWidth or width)
      height: 50,                   // Fixed height (You'll usually use either maxHeight or height)
      keepAspectRatio: true,        // Should the new image keep its aspect ratio ?
      onResize: resizedImage => {   // Callback called after every resize
        document.body.appendChild(resizedImage);
      }
    }
    
    • Methods

    See the documentation for the method definitions.

    • Example

    See this JSFiddle for a working example

    Authors

    Install

    npm i @zenoo/image-resize

    DownloadsWeekly Downloads

    5

    Version

    0.1.2

    License

    none

    Unpacked Size

    1.07 MB

    Total Files

    39

    Last publish

    Collaborators

    • zenoo