https://github.com/SeregPie/VuetifyImageInput

Provides basic image editing tools.
https://github.com/SeregPie/VuetifyImageInput

Last synced: 22 days ago
JSON representation

Provides basic image editing tools.

• Host: GitHub
• URL: https://github.com/SeregPie/VuetifyImageInput
• Owner: SeregPie
• License: mit
• Created: 2018-05-29T12:50:11.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-04T19:14:30.000Z (3 months ago)
• Last Synced: 2024-05-06T19:07:58.915Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://seregpie.github.io/VuetifyImageInput/
• Size: 667 KB
• Stars: 132
• Watchers: 6
• Forks: 36
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome - Vuetify Imge Input - Image editor as a component (🙌 Projects using Vuetify <a name="projects"></a> / Vuetify 2)

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';

```

*or*

Use the [treeshaking](https://vuetifyjs.com/features/treeshaking) system.

```javascript

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

```

### browser

```html

```

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

```

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