# vue-img-clipping

> A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size

Latest version **1.0.2** (published 2021-09-09) · Apache2.0 license · 0 weekly downloads

## Install

```sh
npm install vue-img-clipping
pnpm add vue-img-clipping
yarn add vue-img-clipping
bun add vue-img-clipping
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-09-09 |
| First published | 2021-05-12 |
| Weekly downloads | 0 |
| License | Apache2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 1 |
| Unpacked size | 88.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | sssh |
| Maintainers | npm_ssh |
| Keywords | image, crop, cutter, vue, 裁剪 |

## Links

- npm: https://www.npmjs.com/package/vue-img-clipping
- npm.io page: https://npm.io/package/vue-img-clipping

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.2

## 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.2 (latest) — 2021-09-09
- 1.0.1 — 2021-05-13
- 1.0.0 — 2021-05-12

## README

# vue-img-clipping

简单易用的vue图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求

### 更新说明：
---
2021-09-09 
 - 新增圆形截取框, 设置为圆形取景框后，截取出图片可以设置为圆形或方形，若是设置比例咋不生效


### 特色：
---
 - 兼容IE9+,MSEdge,Chrome,Firefox
 - 两种展现形式，行内或弹窗
 - 可旋转、缩放图片
 - 任意比例、大小裁剪
 - 固定比例、大小裁剪
 - 支持远程图片裁剪、跨域设置
### 插件截图：
----
![插件截图](https://i.bmp.ovh/imgs/2019/11/28f8a9059f089e05.png)

### 使用方法：
----
1. 安装
```shell
npm install vue-img-clipping --save-dev
```
2. 将ImgCutter.vue文件引入项目：
```javascript
import ImgClipping from 'vue-img-clipping'
export default {
        components:{
            ImgClipping
        },
...
}
```
3. 在页面中使用：
```html
<ImgClipping v-on:cutDown="cutDown"></ImgClipping>
```
4. 可使用solt
```html
<ImgClipping v-on:cutDown="cutDown">
    <button slot="open">选择图片</button>
</ImgClipping>
```
5. 远程、跨域裁剪（兼容IE9）
> ~~需要自己写一个方法来触发裁剪工具弹出~~
> ~~在方法中先将图片上传至服务器，拿到返回的url后创建一个obj，然后将对象传入裁剪工具~~
> 2.1.9版本后只需要传入图片url和图片名称
```javascript
// 传入的obj必须包含这四个属性
let obj = {
    name:'1.jpg',//远程图片名称
    src:'http://url/1.jpg',//远程图片url
    //width:200,//远程图片的原始宽度 2.1.9版本后不需要
    //height:200,//远程图片的原始高度  2.1.9版本后不需要
}
```
```javascript
forIe9:function(){
    // 传入name，src name中必须包含后缀名
    this.$refs.imgCutterModal.handleOpen({
        name:"image.jpg",
        src:"http://imageServ.com/image.jpg",
    });
}
```
### 参数说明：
----
| 属性名 | 作用 | 类型  | 必填 | 默认值 | 说明 |
|:----:|:----:|:----:|:----:|:----:|:----:|
|viewfinderShape|取景框形状(square:方形,circular:圆形)|String|否|square|新属性||
|picShape|图片形状(square:方形,circular:圆形)|String|否|square|新属性|
|isModal|是否为弹窗模式|Boolean|否|true|
|showChooseBtn|是否显示选择图片按钮|Boolean|否|true|
|lockScroll|是否在Dialog出现时将body滚动锁定|Boolean|否|true|
|label|默认打开裁剪工具按钮的显示文字|String|否|选择图片|
|boxWidth|裁剪工具宽度|Number|否|800|
|boxHeight|裁剪工具高度|Number|否|400|
|cutWidth|默认裁剪宽度|Number|否|200|
|cutHeight|默认裁剪高度|Number|否|200|
|tool|是否显示工具栏|Boolean|否|true|
|toolBgc|工具栏背景色|String(例: "#fff")|否|#fff|
|sizeChange|是否能够调整裁剪框大小|Boolean|否|true|
|moveAble|能否调整裁剪区域位置|Boolean|否|true|
|imgMove|能否拖动图片|Boolean|否|true|
|originalGraph|是否直接裁剪原图|Boolean|否|false|
|crossOrigin|是否设置跨域，需要服务器做相应更改|Boolean|否|false|
|crossOriginHeader|设置跨域信息crossOrigin为true时才生效|String|否|''|
|rate|图片比例|String(例: "4:3")|否|-|
|WatermarkText|水印文字|String|否|''|
|WatermarkTextFont|水印文字字体|String|否|'12px Sans-serif'|
|WatermarkTextColor|水印文字颜色|String|否|'#fff'|
|WatermarkTextX|水印文字水平位置|Number|否|0.95|
|WatermarkTextY|水印文字垂直位置|Number|否|0.95|
|smallToUpload|如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件|Boolean|否|false|
|saveCutPosition|是否保存上一次裁剪位置及大小|Boolean|否|false|
|scaleAble|是否允许滚轮缩放图片|Boolean|否|true|
|index|自定义参数，将会同结果一起返回|Any|否|null|
|previewMode|裁剪过程中是否返回裁剪结果，如果裁剪出现卡顿时将此项设置为false|Boolean|否|true|
|fileType|返回的文件类型 ( png / jpeg / webp)|String|否|png|
> 支持slot，在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮
### 钩子函数：
| 属性名 | 作用 | 类型  | 必填 | 返回值 |
|:----:|:----:|:----:|:----:|:----:|
|cutDown|完成截图后要执行的方法|Function|是|Object|
|error|错误回调|Function|否|Error object|
|onChooseImg|选择图片后|Function|否|Object|
|onPrintImg|在画布上绘制图片|Function|否|Object|
|onClearAll|清空画布|Function|否|null|
### 插槽(slot)：
| 插槽名称 | 作用  |
|:----:|:----:|
|open 或 openImgCutter|弹出裁剪框|
|choose|选择本地图片|
|cancel|取消/清空|
|confirm|确认裁剪|
|ratio|工具栏：宽高比|
|scaleReset|工具栏： 重置缩放|
|turnLeft|工具栏： 向左旋转|
|turnRight|工具栏： 向右旋转|
|reset|工具栏： 重置旋转|
|flipHorizontal|工具栏： 水平翻转|
|flipVertically|工具栏： 垂直翻转|
### 返回值 @cutDown：
----
| 属性名 | 类型  |
|:----:|:----:|
|fileName|文件名|
|file|file类型的文件对象（IE部分版本可能不会返回）|
|blob|blob类型的文件对象（IE部分版本可能不会返回）|
|dataURL|dataURL|
|index|Any|

---
_Source: https://npm.io/package/vue-img-clipping · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._