clip-js

clip

⚡️ 一个抠图工具

安装

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

触点离开闭合边框