40

Imagvue is a image processing component for Vue.js

 5 years ago
source link: https://www.tuicool.com/articles/hit/Fnu6Rnu
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Imagvue

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

  • Support image lazy loading.

  • All Attributes can bind with data

QNZJz2M.gif

Demo

Installation

Get from npm / yarn:

npm i imagvue
yarn add imagvue

or just include imagvue.js to your view like

<script src='./imagvue.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',
      loaclURL: require('./imagvue.png'),
    }
  }
}

Lazy loading Image

how to use ?

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

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

YzeeYbf.gif

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>

NruuYbj.png!web

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>

QZRjUni.png!web

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>

6Z73Qrf.png!web

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>

fM36Vjb.png!web

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>

Ef6fyiM.png!web

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>

ZzIb6jy.png!web

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>

VfyYjqN.png!web

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>

FzQRzaz.png!web

12. saturate

Type: String , Number
Required: false
Default: 0

Saturates the input image.

Range: 0 ~ 100 ( % )

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

MzInAr6.png!web

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>

2iYNBfi.png!web

14. dropShadow

Type: Object
Required: false
Default: null

Applies a drop shadow effect to the input image.

offset
blurRadius
spreadRadius
color
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>

uqER3mY.png!web

15. customData

Type: Object

Required: false

Default: null

This is used to pass additional information to <imagvue>

<imagvue>
<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"></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.

If you have any suggestions ideas or just wanna say something you can send me an email at [email protected] , thank you.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK