mcanvas's Introduction

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;

Document

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

// create the canvas by width and height;
import { MCanvas } from 'mcanvas'

const mc = new MCanvas({
	width,
	height,
	backgroundColor,
});

// prepare background-image
mc.background(image, {
    left: 0,
    top: 0,
    color: '#000000',
    type: 'origin',
})

// prepare the image material, add into queue;
.add('images/nose.png',{
    width:183,
    pos:{
        x:250,
        y:369,
        scale:0.84,
        rotate:1,
    },
})

// add text;
.text('normal<br><s>smallsmall</s>',{
    width:'300px',
    align:'center',
    pos:{
        x:0,
        y:0,
    },
})

// prepare watermark;
.watermark(img ,{
    width:'40%',
    pos:'rightBottom',
})

// draw all material that prepared before, and get the base64-image
.draw(b64 =>{
    console.log(b64);
});

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)
})