xd-tayde / Mcanvas
用于合成图片的canvas绘制库
Stars: ✭ 343
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Mcanvas
Watermark
canvas图片水印,用于身份证等个人信息添加仅用于XXX等字样保护个人信息
Stars: ✭ 219 (-36.15%)
Mutual labels: watermark, canvas
Alimask
😷 alimask 是一个使用 canvas 生成类似阿里巴巴内部网站水印图片的 JavaScript 库。
Stars: ✭ 163 (-52.48%)
Mutual labels: watermark, canvas
Easycanvas
数据驱动、2D&3D、渐进式Canvas库,支持JSX,配备Chrome调试插件,支持微信小游戏、物理引擎等。
Stars: ✭ 281 (-18.08%)
Mutual labels: canvas
Canvasapi
Python API wrapper for Instructure's Canvas LMS. Easily manage courses, users, gradebooks, and more.
Stars: ✭ 306 (-10.79%)
Mutual labels: canvas
Eex
Web experiments. Lots of Canvas stuff. View demos on project site (Chrome recommended):
Stars: ✭ 317 (-7.58%)
Mutual labels: canvas
Stegastamp
Invisible Hyperlinks in Physical Photographs
Stars: ✭ 306 (-10.79%)
Mutual labels: watermark
React Particles Webgl
🔆 A 2D/3D particle library built on React, Three.js and WebGL
Stars: ✭ 330 (-3.79%)
Mutual labels: canvas
Lightweight Charts
Financial lightweight charts built with HTML5 canvas
Stars: ✭ 4,390 (+1179.88%)
Mutual labels: canvas
Localresizeimg
🔥 前端本地客户端压缩图片,兼容IOS,Android,PC、自动按需加载文件
Stars: ✭ 3,135 (+813.99%)
Mutual labels: canvas
Xi Electron
A front-end for the xi-editor built with modern web technologies.
Stars: ✭ 333 (-2.92%)
Mutual labels: canvas
Vue Canvas Poster
vue生成海报图,一个通过 css 属性画 canvas 图片的轻量级的 vue 组件 (Vue poster,a lightweight vue component that draws canvas images via css properties.)
Stars: ✭ 281 (-18.08%)
Mutual labels: canvas
Klinechart
📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.(可高度自定义的轻量级k线图,无第三方依赖,支持移动端)
Stars: ✭ 303 (-11.66%)
Mutual labels: canvas
Lemonjournal
A WeChat mini program demo based on Wafer2 framework - 微信小程序Demo:柠檬手帐 - 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图
Stars: ✭ 341 (-0.58%)
Mutual labels: canvas
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
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].