vuetify-image-input

Provides basic image editing tools.

Usage no npm install needed!

<script type="module">
  import vuetifyImageInput from 'https://cdn.skypack.dev/vuetify-image-input';
</script>

README

VuetifyImageInput

Provides basic image editing tools.

demo

Try it out!

dependencies

setup

npm

npm i vuetify-image-input

import VuetifyImageInput from 'vuetify-image-input';

Use the treeshaking system.

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

browser

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

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

Vue.component(VImageInput.name, VImageInput);

or

Register the component locally.

import VImageInput from 'vuetify-image-input';

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

Use the component inside a template.

<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