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;

  Example

  Git

Document

English | 中文版

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

License

MIT

更新：

• 2.0.8

  • MCanvas.text 新增 wordBreak 属性，用于设置自动换行点；
  • 更新文档；
  • 修复声明文件错误；

• 2.0.0

  • 重整项目架构，更好的模块化代码，引入 Typescript， Promise;
  • 重写 MCrop, 优化实现方式，新增 radius；
  • 原 MCanvas 调整为 MComposer，
    • 优化 mc.rect，新增 radius；
    • 优化 mc.add.crop， 新增 radius;
    • mc.draw 方法新增 exportConfig： 'base64' | 'canvas' 配置导出格式；
  • 抽离 Queue 类；
  • 新增 MFilter 滤镜器：
    • 高斯模糊；
    • 翻转；
    • 灰白；

• 1.3.9 (2019-5-10)

  • 优化文档；
  • 修复 MCrop 裁剪时图片格式的设置问题；
  • 优化 rollup 打包，导出 MCrop 方法；

• 1.3.8 (2019-5-9)

  • 升级新版 rollup 脚手架 (rollup-typescript-startkit);
  • 新增图片裁剪工具 MCrop, 更新文档;
  • 修复小数点计算问题导致图片变模糊的问题；

• 1.3.4 (6.22)

  • 修改文字绘制机制，新增文字旋转参数，option.pos.rotate；

• 1.3.2 (4.28)

  • add函数width参数新增origin, 表示按原图尺寸绘制；
  • 文字绘制新增容错: 当 options.width < fontSize 时，则按fontSize进行绘制，避免换空行的问题；
  • 修复初始化不传参数报错的问题；

• 1.3.1 (4.28)

  • 修复text调用多次会相互影响的问题；

• 1.3.0 (2.22)

  • 修改新建实例时的参数格式，较为统一且便于拓展；
  • 优化储存管理分类，实例上新增 fn 及 data 属性;
  • 新增Api mc.rect / mc.circle, 用于绘制矩形和圆形；
  • 纠正mc.text方法定位不准确的问题，并新增描边文字,渐变文字，文字阴影的功能;
  • 新增错误回调，当图片加载失败是会触发由 draw 中传入的 error回调;
  • 优化文档及代码；

• 1.2.9 (12.20)

  • 新增Api mc.clear: 清空画布；

• 1.2.8 (10.27)

  • 修复background API接口的left/top参数纵向居中问题，另外新增支持left:'center',统一API;

• 1.2.6 (9.27)

  • background API接口的left/top参数新增0%、50% 和 100%;

• 1.2.5 (9.27)

  • 修复文档错误；

• 1.2.3 (9.26)

  • 增加素材canvas大小的限制，ios8为2096，其余限制为4096；

• 1.2.2 (9.25)

  • 增加参数的向下取整；

• 1.2.1 (9.7)

  • 修改 add 函数中的 crop 裁剪功能BUG；

• 1.2.0 (8.28)

  • 修改mc.draw()的传参形式，增加可配置的导出图片格式及图片质量，兼容旧版api;
  • 增加一些可能引发错误的错误提醒，便于业务方定位问题；

• 1.1.8 (8.13)

  • 更新文档；

• 1.1.7 (8.12)

  • 增加mc.background(bg)接口初次调用时的错误提醒，修改异常提示的内容；

• 1.1.6 (8.11)

  • 修复竖直素材下,为了规避裁剪的画布放大倍数错误的问题；

• 1.1.5 (8.10)

  • 增加 add/background/watermark 传入的image可以为 canvas；

• 1.1.4 (8.9)

  • 增加英文文档；
  • 增加初始化时可配置默认背景色；

• 1.1.3 (8.3)

  • 修改一处警告语法错误；
  • 增加画素材的小画布放大机制，用于解决因旋转导致的裁剪；
  • 增加小画布绘制后清空机制，避免因素材太大导致占用内存过高；

• 1.0.9 (7.27)

  • 获取图片宽度由 img.width 修改为 img.naturalWidth,以避免直接传入DOM节点时获取宽高被css影响；
  • 增加背景图片错误提醒；

• 1.0.8 (7.27)

  • 调整构造函数结构，使用 prototype 原型链的形，以兼容不带 new 的调用方式；
  • 调整完善文档；
  • 删除错误的包依赖，调整包名；

• 1.0.2 (7.26)

  • 修正完善文档
  • 修改 bigStyle --> largeStyle;