runkids / Imagvue

:rice_scene: Imagvue is an image component for Vue.js

Imagvue

• Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.).

• Support image lazy loading.

• All Attributes can bind with data

Demo

Installation

Get from npm / yarn:

npm i imagvue

yarn add imagvue

Directly include imagvue.min.js to your view like

<script src='https://cdn.jsdelivr.net/npm/imagvue@0.0.5/dist/imagvue.min.js'></script>

Usage

html:

<imagvue v-model="url" width="400" height="600"></imagvue>

vue file:

import imagvue from 'imagvue'

export default {
  name: 'app',
  components: {
    imagvue,
  },
  data(){
    return {
      url: 'https://source.unsplash.com/random',
      localURL: require('./imagvue.png'),
    }
  }
}

Lazy loading Image

DEMO

how to use ?

Use transition-group and set attribute src with your loading image inner imagvue. Also you can set attributelazy for delay time.

1. src

Type: String
Required: ture

Your loading image.

2. lazy

Type: Number
Default: 0

Show image delay time.

3. rootMargin

Type: String
Default: 0px

Syntax similar to that of CSS Margin

rootMargin

4. threshold

Type: Number
Default: 0

Ratio of element convergence

threshold

  <imagvue
    v-model="url"
    :onerror="()=>url='https://i.stack.imgur.com/cl91I.png'"
    width="400" 
    height="600"
  >
    <transition-group 
      :src="require(loading.gif)" --> your loading image
      :lazy="500" --> lazy time , default is 0 ( ms )
      rootMargin="0px 0px"
      :threshold="0.1"
    >
    </transition-group> 
  </imagvue>

Browser Support

Available in latest browsers. If browser support is not available, use this polyfill.

Props

1. value

Type: String
Required: ture

The image URL. This is mandatory for the <imagvue>

<imagvue v-model="url"></imagvue>

2. width

Type: String , Number
Required: false
Default: auto

The intrinsic width of the image in pixels.

3. height

Type: String , Number
Required: false
Default: auto

The intrinsic height of the image in pixels.

4. onerror

Type: Function
Required: false

If an error occurs while trying to load or render an image , call a function

<imagvue 
  v-model="url"
  :onerror="()=>url='./error.png'"
>
</imagvue>

5. blur

Type: String , Number
Required: false
Default: 0

Applies a Gaussian blur to the input image.
Range: 0 ~ larger value ( px )

<imagvue v-model="url" :blur="50"></imagvue>

6. contrast

Type: String , Number
Required: false
Default: 100

Adjusts the contrast of the input.
Range: 0 ~ over 100 ( % )

<imagvue v-model="url" :contrast="50"></imagvue>

7. brightness

Type: String , Number
Required: false
Default: 100

Applies a linear multiplier to input image
Range: 0 ~ over 100 ( % )

<imagvue v-model="url" :brightness="50"></imagvue>

8. grayscale

Type: String , Number
Required: false
Default: 0

Converts the input image to grayscale.
Range: 0 ~ 100 ( % )

<imagvue v-model="url" :grayscale="50"></imagvue>

9. hueRotate

Type: String , Number
Required: false
Default: 0

Applies a hue rotation on the input image.
Range: 0 ~ 360 ( deg )

<imagvue v-model="url" :hue-rotate="50"></imagvue>

10. invert

Type: String , Number
Required: false
Default: 0

Inverts the samples in the input image.
Range: 0 ~ 100 ( % )

<imagvue v-model="url" :invert="50"></imagvue>

11. opacity

Type: String , Number
Required: false
Default: 0

Applies transparency to the samples in the input image.
Range: 0 ~ 100 ( % )

<imagvue v-model="url" :opacity="50"></imagvue>

12. saturate

Type: String , Number
Required: false
Default: 0

Saturates the input image.
Range: 0 ~ 100 ( % )

<imagvue v-model="url" :saturate="50"></imagvue>

13. sepia

Type: String , Number
Required: false
Default: 0

Converts the input image to sepia.
Range: 0 ~ 100 ( % )

<imagvue v-model="url" :sepia="50"></imagvue>

14. dropShadow

Type: Object
Required: false
Default: null

Applies a drop shadow effect to the input image.

• offset: This value to set the shadow offset.
• blurRadius: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.
• spreadRadius: Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink.
• color: The color of the shadow.

export default {
  name: 'app',
  components: {
    imagvue,
  },
  data(){
    return {
      dropShadow:{ 
        offset: 16, --> required
        blurRadius: 0, --> optional default 0 px
        spreadRadius: 0, --> optional default 0 px
        color: 'black' --> optional default black
      }
    }
  }
}

<imagvue v-model="url" :dropShadow="dropShadow"></imagvue>

15. filters

Type: Boolean
Required: false
Default: true

if you won't to use filters ( blur,contrast,grayscale, etc.).
just set props filters to false

<imagvue v-model="url" :filters="false"></imagvue>

16. customData

Type: Object
Required: false
Default: null

This is used to pass additional information to <imagvue>

• on: events to be subscribe of <imagvue>
• props: props to be passed to <imagvue>

<imagvue v-model="url" :customData="customData()"></imagvue>

methods:{
    onLoadEvent(){
      //todo
    },
    customData(){
      return {
        on: {
          load: this.onLoadEvent,
        }
      }
    }
}

Code Example

<template>
  <div class="container">
      <imagvue class="lazyimage"
          v-for="d in loadUrls" :key="d.url"
          :onerror="()=>d.url=errorURL"
          :value="d.url"
          width="400" 
          height="267"
          :blur="filters.blur"
          :brightness="filters.brightness"
          :contrast="filters.contrast"
          :grayscale="filters.grayscale"
          :hue-rotate="filters.rotate"
          :opacity="filters.opacity"
          :invert="filters.invert"
          :saturate="filters.saturate"
          :sepia="filters.sepia"
          :dropShadow="dropShadow"
          :customData="customData()"
      >
        <transition-group :src="d.lazy" :lazy="0" rootMargin="0px 0px" :threshold="0.1"></transition-group>
      </imagvue>
  </div>
</template>

<script>
import imagvue from 'imagvue';
export default {
  components:{
    imagvue,
  },
  data(){
    return{
      filters: {
        blur: 0,
        contrast: 100,
        brightness: 100,
        grayscale: 0,
        rotate: 0,
        opacity: 100,
        invert: 0,
        saturate: 100,
        sepia: 0,
        dropShadow:{ 
          offset: 16,
          blurRadius: 10, 
          spreadRadius: 10, 
          color: 'black'
        }
      },
      errorURL:'https://cdn.browshot.com/static/images/not-found.png',
      loadUrls:[
        {url:'https://goo.gl/PxTSno' , lazy:'https://goo.gl/aiwqia'},
        {url:'https://goo.gl/K1kZWk' , lazy:'https://goo.gl/vnHTAh'},
        {url:'https://goo.gl/gTZMkF' , lazy:'https://goo.gl/K1Mheq'},
        {url:'https://goo.gl/PxTSno1' , lazy:'https://goo.gl/aiwqia'},
      ]
    }
  },
  methods:{
    onLoadEvent(){
      console.log("Image on load!");
    },
    customData(){
      return {
        on: {
          load: this.onLoadEvent,
        }
      }
    }
  }
}
</script>

<style>
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.lazyimage{
  max-width: 100%;
  display: block;
  margin: 1024px auto 128px;
  background-repeat: no-repeat;
  background-size: contain;
}
</style>

License

Imagvue is licensed under MIT License.