clipperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用（关键是使用方法简单，几行代码就可以搞定）
- 同时对移动端和pc端的支持
- 支持commonjs、esmoudle和cdn的方式引入
- 使用简单、傻瓜式操作
npm install clipper-image --save import Clipper from 'clipper-image'提示：也支持
<script src="clipper-image.iife.js"></script>的方式引入
添加1html容器
注意： 容器需要设置宽度和高度，容器的宽度作为滑块验证码的宽度
<div class="clipper" style="width: 800px; height: 480px;"></div>pc端推荐配置
const clipper = new Clipper({
el: '.clipper'
})
clipper.setImgFile(file)移动端推荐配置
const clipper = new Clipper({
el: '.clipper',
clipRect: {
size: [0.8, 0.8],
position: 'center',
visible: true,
isCanHidden: false, // 是否支持隐藏
isCanResize: false, // 是否可以更改尺寸大小
isCanPosition: false // 是否可以改变位置
}
})
clipper.setImgFile(file)| 名称 | 类型 | 默认值 | 必传 | 说明 |
|---|---|---|---|---|
el |
string | element | 无 | 是 | 控件容器 |
onChange |
function | 无 | 否 | 当裁剪位置（大小）发生变化时的回调 (参数1：裁剪图片的blob对象) |
clipRect.size |
Array | [0.5, 0.5] | 否 | 裁剪区域初始化时默认大小；[0.5, 0.1] 横向宽度为父元素的1/2, 纵向宽度为父元素的 1/10; ['50px', '60px'] 横向宽度为50像素, 纵向宽度为 60像素; |
clipRect.visible |
boolean | false | 否 | 裁剪区域初始化时是否隐藏 |
clipRect.position |
Array | 'center' | 'center' | 否 | 裁剪区域初始化时默认位置；[0.5, 0.1] 距离左边1/2, 距离顶部 1/10; ['50px', '60px'] 距离左边50像素, 距离顶部 60像素; center 自动计算后居中 |
clipRect.isCanHidden |
boolean | true | 否 | 裁剪区域是否可以隐藏 |
clipRect.isCanResize |
boolean | true | 否 | 裁剪区域是否可以自定义设置大小 |
clipRect.isCanPosition |
boolean | true | 否 | 裁剪区域是否可以改变位置 |
| 方法名 | 返回值 | 示例 | 描述 |
|---|---|---|---|
setImgFile |
Promise | setImgFile.reset(blob) |
设置要裁剪的图片; blob为图片对象 |
getClipImage |
Promise | clipper.getClipImage() |
获取裁剪区域的blob对象 |
init |
无 | clipper.init() |
销毁控件后可以调用init方法重新显示裁剪画布 |
destory |
无 | clipper.destory() |
销毁控件 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent