# clipper-image
> `clipperjs`是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用（关键是使用方法简单，几行代码就可以搞定）
Latest version **1.0.4** (published 2022-12-07) · ISC license · 0 weekly downloads
## Install
```sh
npm install clipper-image
pnpm add clipper-image
yarn add clipper-image
bun add clipper-image
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-12-07 |
| First published | 2022-12-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 106 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | LLLarry |
| Maintainers | lllarry |
| Keywords | clipper-image, 裁剪图片, 图片裁剪, 头像截取, clipper |
## Links
- npm: https://www.npmjs.com/package/clipper-image
- Repository: https://github.com/LLLarry/clipper-image
- Homepage: http://121.5.230.70:8080/clipper-image/
- Issues: https://github.com/LLLarry/clipper-image/issues
- npm.io page: https://npm.io/package/clipper-image
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 1.0.4 (latest) — 2022-12-07
## README
# 裁剪图片
`clipperjs`是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用（关键是使用方法简单，几行代码就可以搞定）
## 演示示例
[演示地址](http://121.5.230.70:8080/clipper-image/)
### PC端演示
### 手机端演示
## 特色功能
* 同时对**移动端**和**pc端**的支持
* 支持commonjs、esmoudle和cdn的方式引入
* 使用简单、傻瓜式操作
## 快速开始
### 安装
```powershell
npm install clipper-image --save
```
### 引入
```js
import Clipper from 'clipper-image'
```
> 提示：也支持``的方式引入
### 用法
添加1`html`容器
> 注意： 容器需要设置宽度和高度，容器的宽度作为滑块验证码的宽度
```html
```
### 创建控件
> pc端推荐配置
```js
const clipper = new Clipper({
el: '.clipper'
})
clipper.setImgFile(file)
```
> 移动端推荐配置
```js
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()` | 销毁控件 |
---
_Source: https://npm.io/package/clipper-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._