45

GitHub - runkids/Imagvue: Imagvue is a image processing component for Vue.js

 5 years ago
source link: https://github.com/runkids/Imagvue
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.

README.md

Imagvue

vue2 npm npm

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

  • Support image lazy loading.

  • All Attributes can bind with data

Imagvue.gif?raw=true

Demo

Edit imagvue 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 attributelazy 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>

68747470733a2f2f692e696d6775722e636f6d2f665a426e6a53542e676966

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>

68747470733a2f2f692e696d6775722e636f6d2f6752665163487a2e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f4e634d7a7464702e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f747446413467322e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f47494b323745632e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f4f4237756c4e5a2e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f714d70667635612e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f586237637576542e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f37316541494e6f2e706e67

12. saturate

Type: String , Number
Required: false
Default: 0

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

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

68747470733a2f2f692e696d6775722e636f6d2f6b775a7030767a2e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f6f3074395443442e706e67

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>

68747470733a2f2f692e696d6775722e636f6d2f566d6e4a6e58522e706e67

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK