img-about

img-about

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
}