imagvue
v0.0.5
Published
Imagvue is an image component for Vue.js
Downloads
55
Maintainers
Readme
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
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',
localURL: 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.
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
4. threshold
Type: Number
Default: 0
Ratio of element convergence
<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.