mcanvas

mcanvas

New version 2.0.0 is coming. It contains some new features:

• Support new function:
  • image merge；
  • image compress；
  • image crop;
  • image filter;
• Support usage in node.js；
• .draw() support usage by promise;
• Rewrite in typescript;

Example

Git

Document

English | 中文版

Introduction

mcanvas is a image handler plugin that can easily merge, crop, compress, filter the image and export a image of base64 finally. It provides some simple api that based on canvas, in order to make your work more efficiently and conveniently.

Installation

• You can download the latest version from the GitHub

• use a npm CDN Web and use window.MCanvas

• Or you can install via npm:

npm install mcanvas --save

import { MCanvas } from 'mcanvas'

Basic Usage

• MCanvas

…

• MImage

// image handler
    // inclue crop / compress / common filter
import { MImage } from 'mcanvas'

const mi = new MImage('http://mtapplet.meitudata.com/596c72073971d86b5128.jpg')

mi.filter('blur')
// crop to area by 300 * 300 and center in origin image
.crop({
    x: 'center',
    y: 'center',
    width: 300,
    height: 300,
    radius: 10,
})
// compress into a image that width is 200px and quality is 0.9
.compress({
    width: 200,
    quality: .9,
})
// get the base64-image
.draw(b64 => {
    console.log(b64)
})

License

MIT