Code Monkey home page Code Monkey logo

mcanvas's Introduction

Mcanvas.js

Example

Git

Document

English | 中文版

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

License

MIT

mcanvas's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.