用于合成图片的canvas绘制库
New version 2.0.0 is coming. It contains some new features:
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.
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'
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)
})