Nerdy Programmers Mingling

    img-about
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    img-about

    NPM Version Download Month gzip with dependencies: 1.3kb typescript pkg.module

    pkg.module supported, which means that you can apply tree-shaking in you project

    A module for image processing in browser, includes getting naturalSize, zooming, compressing... wrapped by Promise

    You may need a Promise polyfill while use old IE browser( >= IE9 )

    repository

    https://github.com/livelybone/img-about.git

    Demo

    https://livelybone.github.io/tool/img-about/

    Installation

    npm i -S img-about

    Global name

    ImgAbout

    Usage

    import {getNaturalSize, imgCompress, canvasSupport, getSizeOfUrl } from 'img-about';

    when you want to set this module as external while you are developing another module, you should import it like this:

    import * as ImgAbout  from 'img-about'
     
    // then use it by need

    Use in html, see what your can use in CDN: unpkg

    <-- use what you want -->
    <script src="https://unpkg.com/img-about/lib/umd/<--module-->.js"></script> 

    Functions

    getNaturalSize

    (url: String|Image|File|FileList|Blob) => Promise<Object: {width, height}>

    imgCompress

    (imgFile: File|Blob, compressOptions: CompressOptions) => Promise<Blob|String>

    var compressTypes = [
        'scale',        // Resize the image by `options.scale`
        'fixedWidth',   // Set the width of the image to a fixed value -- `options.imageSize`
        'fixedHeight',  // Set the height of the image to a fixed value -- `options.imageSize`
        'fixedSize',    // Set the smaller between width and height of the image to a fixed value -- `options.imageSize`
      ]
     
    /**
     * @property   { String }      compressOptions.compressType      default to 'scale'
     * @property   { Number }      compressOptions.scale             default to 1
     * @property   { Number }      compressOptions.imageSize         default to 0
     * @property   { String }      compressOptions.imageType         default to default to the type of `imgFile` or 'image/png'
     * @property   { Number }      compressOptions.quality           default to 0.8
     * @property   { Boolean }     compressOptions.toBlob            default to true
     * */
    var defaultOptions = {
      compressType: compressTypes[0],           // Compress type, options: `compressTypes`
      scale: 1,                                 // Scale factor, works when compressType is `scale`
      imageSize: 0,                             // The fixed value of size, works when compressType is `fixedWidth`, `fixedHeight` or `fixedSize`. If imageSize is 0, it means convert to naturalSize
      imageType: imgFile.type || 'image/png',   // The mine type of image returned
      quality: .8,                              // Compress quality, works when imageType is `image/jpeg` or `image/webp`
      toBlob: true,                             // If it is false, the promise returned will be resolved with a base64 string
    }

    Install

    npm i img-about

    DownloadsWeekly Downloads

    25

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • livelybone