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
Basic Usage
MCanvas
// create the canvas by width and height; const mc = width height backgroundColor; // prepare background-imagemcbackgroundimage left: 0 top: 0 color: '#000000' type: 'origin' // prepare the image material, add into queue; // add text;text'normal<br><s>smallsmall</s>' width:'300px' align:'center' pos: x:0 y:0 // prepare watermark; // draw all material that prepared before, and get the base64-image;
MImage
// image handler // inclue crop / compress / common filter const mi = 'http://mtapplet.meitudata.com/596c72073971d86b5128.jpg' mi// crop to area by 300 * 300 and center in origin image// compress into a image that width is 200px and quality is 0.9// get the base64-image