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

触点离开闭合边框