# vuetify-image-input

> Provides basic image editing tools.

Latest version **19.2.2** (published 2021-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuetify-image-input
pnpm add vuetify-image-input
yarn add vuetify-image-input
bun add vuetify-image-input
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 19.2.2 |
| Published | 2021-04-08 |
| First published | 2018-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 129 |
| Author | Sergej Sintschilin |
| Maintainers | seregpie |
| Keywords | component, image, input, vue, vuetify |

## Links

- npm: https://www.npmjs.com/package/vuetify-image-input
- Repository: https://github.com/SeregPie/VuetifyImageInput
- Homepage: https://github.com/SeregPie/VuetifyImageInput#readme
- Issues: https://github.com/SeregPie/VuetifyImageInput/issues
- npm.io page: https://npm.io/package/vuetify-image-input

## 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

- 19.2.2 (latest) — 2021-04-08
- 19.2.1 — 2021-04-07
- 19.2.0 — 2021-01-13
- 19.1.0 — 2019-10-25
- 19.0.0 — 2019-10-18
- 18.16.0 — 2019-05-23
- 18.15.1 — 2018-12-13
- 18.15.0 — 2018-12-12
- 18.14.0 — 2018-12-04
- 18.13.0 — 2018-11-16
- 18.12.2 — 2018-11-16
- 18.12.1 — 2018-11-06
- 18.12.0 — 2018-11-06
- 18.11.0 — 2018-10-31
- 18.10.25 — 2018-10-25
- … 9 more at https://npm.io/package/vuetify-image-input/versions

## README

# VuetifyImageInput

Provides basic image editing tools.

## demo

[Try it out!](https://seregpie.github.io/VuetifyImageInput/)

## dependencies

- [VueClaw](https://github.com/SeregPie/VueClaw)

## setup

### npm

```shell
npm i vuetify-image-input
```

---

```javascript
import VuetifyImageInput from 'vuetify-image-input';
```

---

Use the treeshaking system.

```javascript
import VuetifyImageInput from 'vuetify-image-input/a-la-carte';
```

### browser

```html
<link
  href="https://unpkg.com/vuetify@2/dist/vuetify.min.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vuetify@2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vuetify-image-input"></script>
```

The component is globally available as `VuetifyImageInput`. If Vue is detected, the component is registered automatically.

## usage

Register the component globally.

```javascript
import Vue from 'vue';
import VImageInput from 'vuetify-image-input';

Vue.component(VImageInput.name, VImageInput);
```

*or*

Register the component locally.

```javascript
import VImageInput from 'vuetify-image-input';

export default {
  components: {
    VImageInput,
  },
  // ...
};
```

---

Use the component inside a template.

```html
<v-image-input
  v-model="image"
  :image-quality="0.85"
  clearable
  image-format="jpeg"
  @file-info="onFileInfo"
/>
```

## properties

| name | type | default | description |
| ---: | :--- | :--- | :--- |
| `clearable` | `Boolean` | `false` | |
| `clearIcon` | `String` | `'$clear'` | |
| `clearIconStyle` | `Object` | | |
| `debounce` | `Number` | `0` | |
| `disabled` | `Boolean` | `false` | |
| `errorIcon` | `String` | `'$error'` | |
| `errorIconStyle` | `Object` | | |
| `flipHorizontallyIcon` | `String` | `'mdi-flip-horizontal'` | |
| `flipHorizontallyIconStyle` | `Object` | | |
| `flipVerticallyIcon` | `String` | `'mdi-flip-vertical'` | |
| `flipVerticallyIconStyle` | `Object` | | |
| `fullHeight` | `Boolean` | `false` | |
| `fullWidth` | `Boolean` | `false` | |
| `hideActions` | `Boolean` | `false` | |
| `imageBackgroundColor` | `String` | | |
| `imageFormat` | `String` | `'png'` | Possible values are `'png'`, `'jpeg'` and `'webp'`. |
| `imageHeight` | `Number` | `256` | |
| `imageMaxScaling` | `Number` | `1` | |
| `imageMinScaling` | `String` | `'cover'` | Possible values are `'cover'` and `'contain'`. |
| `imageQuality` | | | |
| `imageWidth` | `Number` | `256` | |
| `name` | `String` | | |
| `overlayBackgroundColor` | `String` | `'rgba(0,0,0,0.5)'` | |
| `overlayBorderColor` | `String` | `'#fff'` | |
| `overlayBorderWidth` | `String` | `'4px'` | |
| `overlayPadding` | `String` | `'50px'` | |
| `readonly` | `Boolean` | `false` | |
| `rotateClockwiseIcon` | `String` | `'mdi-rotate-right'` | |
| `rotateClockwiseIconStyle` | `Object` | | |
| `rotateCounterClockwiseIcon` | `String` | `'mdi-rotate-left'` | |
| `rotateCounterClockwiseIconStyle` | `Object` | | |
| `successIcon` | `String` | `'$success'` | |
| `successIconStyle` | `Object` | | |
| `uploadIcon` | `String` | `'mdi-upload'` | |
| `uploadIconStyle` | `Object` | | |
| `value` | `String` | | |

## events

| name |
| ---: |
| `file-info` |
| `input` |

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