Mcanvas.js
Document
Introduction
Mcanvas is a plugin that can easily compose the image, text, watermark 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 and use
window.MCanvas -
Or you can install via npm:
npm install mcanvas --save
import MCanvas from 'mcanvas'Basic Usage
// create the canvas by width and height;
import MC from 'mcanvas'
const mc = new MC({
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);
});// MCrop, a image cropper
import { MCrop } from 'mcanvas'
MCrop('http://mtapplet.meitudata.com/596c72073971d86b5128.jpg', {
// cropper shape
type: 'circle',
// crop by pos
x: 'center',
y: '0',
// radius
r: 200,
// the success callback
success(b64) {
// the base64 of cropped image
},
})