Skip to content

FastImg can help you process image, such as compression, clipping, mix, etc

License

Notifications You must be signed in to change notification settings

BenFeiJr/FastImg

Repository files navigation

FastImg

FastImg can help you process image, such as compression, clipping, mix, etc

Installation

NPM

npm install fastimg --save

Then load

// ES6
import FastImg from 'fastimg';

Example

// load
import FastImg from 'fastimg';

// create instance
// `img` can be img file, img html element or img link href
const fastImgIns = new FastImg(img);

// then, can call `fastImgIns` methods
// for example

// `ready` method must be called first, which means that image has been loaded. 
// Then the methods to handle image can be called.
fastImgIns.ready().then(() => {
    return fastImgIns.zip(0.2);
}).then(() => {
    return fastImgIns.rotate(90);
}).then(() => {
    return fastImgIns.mix(otherImg, 10, 10);
}).then(() => {
    return fastImgIns.clip(20, 20, 150, 150, 15);
}).then(() => {
    return fastImgIns.scale(2);
}).then(() => {
    return fastImgIns.toDataURL();
}).then((base64Url) => {
    console.log(base64Url);
}).catch((err) => {
    console.log(err)
});

API

  1. new FastImg(img)
/**
 * img
 *
 * @param {Object|string} img can be img html element, img file or img href link 
 */
const fastImgIns = new FastImg(img)
  1. ready()
/**
 * means image has been loaded, it must be called first
 * 
 * @return {Promise}
 */
fastImgIns.ready();
  1. clip(x, y, width, height, radius)
/**
 * clip image
 * 
 * @param {number} x clipping start x axis position
 * @param {number} y clipping start y axis position 
 * @param {number} width clipping width 
 * @param {number} height clipping height 
 * @param {number=} radius clipping radius, default 0
 * @return {Promise}
 * 
 * When width and height are equal, and radius is half width, then you get a circle  
 */
fastImgIns.clip(x, y, width, height, radius)
  1. zip(quality, width, height, type)
/**
 * compress image
 * 
 * @param {number} quality compress quality, 0 - 1, default 0.5
 * @param {number=} width change compressed image width, default image origin width
 * @param {number=} height change compressed image height, default image origin height
 * @param {string=} type change compressed image type, default `image/jpeg`
 * @return {Promise}
 * 
 * When type is `image/jpeg`, the image is lossy compression. 
 * If you need lossless compression, you can set quality to 1, then reduce width and height.
 */
fastImgIns.zip(quality, width, height, type)
  1. rotate(deg)
/**
 * rotate image
 * 
 * @param {number} deg rotation angle
 * @return {Promise}
 */
fastImgIns.rotate(deg)
  1. scale(x, y)
/**
 * scale image
 * 
 * @param {number} x x axis zoom factor
 * @param {number=} y y axis zoom factor, if no y parameter, then y is equal to x by default
 * @return {Promise}
 */
fastImgIns.scale(x, y)
  1. mix(img, x, y, width, height)
/**
 * mix another image to current Image
 * 
 * @param {Object|string} img another image 
 * @param {number=} x x axis position of another image, default 0
 * @param {number=} y y axis position of another image, default 0
 * @param {number=} width another image width, default image width 
 * @param {number=} height another image height, default image height 
 * @return {Promise}
 */
fastImgIns.mix(img, x, y, width, height)
  1. toDataURL()
fastImgIns.toDataURL()
  1. toBlob()
fastImgIns.toBlob()
  1. toPng()
fastImgIns.toPng()
  1. toJpeg()
fastImgIns.toJpeg()

License

MIT