# vue-drag-screenshot

> A Vue component to drag-screenshot

Latest version **1.5.7** (published 2019-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-drag-screenshot
pnpm add vue-drag-screenshot
yarn add vue-drag-screenshot
bun add vue-drag-screenshot
```

## 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.5.7 |
| Published | 2019-05-25 |
| First published | 2018-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 292.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | WeiZhe |
| Maintainers | zheade |

## Links

- npm: https://www.npmjs.com/package/vue-drag-screenshot
- Repository: https://github.com/wei-zhe/vue-drag-screenshot
- Homepage: https://github.com/wei-zhe/vue-drag-screenshot#readme
- Issues: https://github.com/wei-zhe/vue-drag-screenshot/issues
- npm.io page: https://npm.io/package/vue-drag-screenshot

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Recent versions

- 1.5.7 (latest) — 2019-05-25
- 1.5.4 — 2019-05-25
- 1.5.2 — 2019-05-25
- 1.5.1 — 2019-05-25
- 1.5.0 — 2018-12-02
- 1.4.2 — 2018-11-20
- 1.4.1 — 2018-11-07
- 1.4.0 — 2018-11-07
- 1.3.5 — 2018-11-06
- 1.3.4 — 2018-11-05
- 1.3.3 — 2018-11-05
- 1.3.2 — 2018-11-05
- 1.3.1 — 2018-11-03
- 1.3.0 — 2018-11-03
- 1.2.2 — 2018-11-01
- … 8 more at https://npm.io/package/vue-drag-screenshot/versions

## README

# vue-drag-screenshot
 
A Vue component to drag-screenshot
一个图片裁剪工具
 ## demo演示
 [demo](https://wei-zhe.github.io/)
 
 ## 安装
 
 ```JS
 npm install vue-drag-screenshot -S
 ```
 
 ## 使用
 
 ```js
 // ES6
 import vuedragscreenshot from 'vue-drag-screenshot'
 
 Vue.use(vuedragscreenshot)

 <vue-screenshot 
    v-model="parentValue"
    :width="500"
    :height="500"
    :imageSrc='imageSrc'
    :control  = 'control'
    >
</vue-screenshot>

control  : {
    narrow   : true,  // 缩小
    clears   : true,  // 清除
    restore  : true,  // 还原
    blowup   : true,  // 放大
    wheel    : true,  // 滚轮缩放 ** 新增
    uniform  : true,  // uniform状态 ** 新增
    dragBox  : {      // 新增拖拽盒子固定尺寸/比例** 新增
        width   : 160,
        height  : 90,
    }
}
 ```
### wheel 
滚动属性，当滚动属性开启时，支持滚轮放大图片；
### uniform
当uniform属性开启时，每次截取区域截图都会自动居中滚轮放大会由图片转至放大选框

## v-model
实时刷新的截图

```js
    // ES6
    <img :src="parentValue"/>
 ```

### Props
 
 |   name   |  Description  |   type   | default | type |
 | -------- | ------------- | :------: | :-----: | ---- |
 | width    | 截图区域宽        | Number	| 500 |（必传）
 | height   | 截图区域高        | Number	| 500 |（必传）
 | imageSrc | 传入需要裁剪的图片 | String	 |     | 选择参数，也可以不传
 | control  | 组建功能按钮      | Object	|     | 选择参数，也可以不传
 
 ![dragScreenshot](./readmeimg/action.png)

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