0.2.0 • Published 5 years ago
clip-js v0.2.0
clip
:zap: 一个抠图工具
安装
npm i --save clip-js
CDN
https://unpkg.com/clip-js/dist/clip.umd.js
https://unpkg.com/clip-js/dist/clip.common.js
https://unpkg.com/clip-js/dist/clip.es.js
基本使用
const pc = new Clip(document.getElementById('c'), '../5.jpg');
pc.on('loaded', ()=>{
// 截图生成base64
const dataURL = pc.clip();
});
API
构造函数参数
属性 | 说明 | 数据类型 | 默认值 |
---|---|---|---|
simplify | 线段简化系数 | Number | 30 |
circleRadius | 画笔端点的圆的半径 | Number | 48 |
circleColor | 画笔端点的圆的颜色 | String | rgba(0,0,0,0.6) |
lineWidth | 画笔线条宽度 | Number | 32 |
lineColor | 画笔线条颜色 | String | rgba(201,91,96,.9) |
magnifierWidth | 放大镜宽度 | Number | 200 |
magnifierHeight | 放大镜高度 | Number | 200 |
方法
set:
签名: (options)=>void
初始化后, 修改参数, 参数同构造函数参数.
toggleMode
签名: ()=>void
切换"画笔"和"移动画布"模式.
zoomIn
签名: ()=>void
背景放大
zoomOut
签名: ()=>void
背景缩小
back
签名: ()=>void
后退.
reset
签名: ()=>void
撤销所有画笔的操作.
clip
签名: ()=>string
生成切图的base64
changeImage
签名: (string)=>void
切换背景图
destroy
签名: ()=>void
销毁
isClosed
签名: ()=>boolean
路径是否闭合
属性
mode 当前模式
钩子
loaded
图片加载成功
clipJS.on('loaded', ()=>{
// 图片加载成功后
});
pen-start
落笔
pen-move
移动笔
pen-end
笔离开
drag-border-start
拖拽闭合边框开始
drag-border-move
拖拽闭合边框中
drag-border-end
触点离开闭合边框