Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/runkids/Imagvue
:rice_scene: Imagvue is an image component for Vue.js
https://github.com/runkids/Imagvue
css-filter-wrapper css-filters image-filters javascript lazy-loading lazyload-images vue vue-components
Last synced: about 2 months ago
JSON representation
:rice_scene: Imagvue is an image component for Vue.js
- Host: GitHub
- URL: https://github.com/runkids/Imagvue
- Owner: runkids
- License: mit
- Archived: true
- Created: 2018-08-04T20:50:37.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-07T03:02:59.000Z (almost 6 years ago)
- Last Synced: 2024-07-14T20:21:15.128Z (2 months ago)
- Topics: css-filter-wrapper, css-filters, image-filters, javascript, lazy-loading, lazyload-images, vue, vue-components
- Language: JavaScript
- Homepage: https://github.com/runkids/Imagvue
- Size: 5.98 MB
- Stars: 265
- Watchers: 10
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Imagvue 
[](https://vuejs.org/) [](https://www.npmjs.com/package/imagvue) [](https://github.com/runkids/Imagvue)
- `Imagvue` provides basic image processing props(size,blur,contrast,grayscale, etc.).
- Support image lazy loading.
- All Attributes can bind with data
## Demo
[](https://codesandbox.io/embed/n7ykx4rxyp?module=%2Fsrc%2FApp.vue&view=preview)
## Installation
Get from npm / yarn:
```js
npm i imagvue
```
```js
yarn add imagvue
```
Directly include [imagvue.min.js](https://cdn.jsdelivr.net/npm/[email protected]/dist/imagvue.min.js) to your view like
```html
```
## Usage
##### html:
```html
```
##### vue file:
``` js
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](https://runkids.github.io/f2e/week2/)
##### 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.
##### 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](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)
##### 4. threshold
Type: `Number`
Default: `0`
Ratio of element convergence
[threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds)
```html
your loading image
:lazy="500" --> lazy time , default is 0 ( ms )
rootMargin="0px 0px"
:threshold="0.1"
>
```
##### Browser Support
Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available, use this [polyfill](https://www.npmjs.com/package/intersection-observer).
## Props
##### 1. value
Type: `String`
Required: `ture`
The image URL. This is mandatory for the ` `
```html
```
##### 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
```html
```
##### 5. blur
Type: `String` , `Number`
Required: `false`
Default: 0
Applies a Gaussian blur to the input image.
Range: 0 ~ larger value ( px )
```html
```
##### 6. contrast
Type: `String` , `Number`
Required: `false`
Default: 100
Adjusts the contrast of the input.
Range: 0 ~ over 100 ( % )
```html
```
##### 7. brightness
Type: `String` , `Number`
Required: `false`
Default: 100
Applies a linear multiplier to input image
Range: 0 ~ over 100 ( % )
```html
```
##### 8. grayscale
Type: `String` , `Number`
Required: `false`
Default: 0
Converts the input image to grayscale.
Range: 0 ~ 100 ( % )
```html
```
##### 9. hueRotate
Type: `String` , `Number`
Required: `false`
Default: 0
Applies a hue rotation on the input image.
Range: 0 ~ 360 ( deg )
```html
```
##### 10. invert
Type: `String` , `Number`
Required: `false`
Default: 0
Inverts the samples in the input image.
Range: 0 ~ 100 ( % )
```html
```
##### 11. opacity
Type: `String` , `Number`
Required: `false`
Default: 0
Applies transparency to the samples in the input image.
Range: 0 ~ 100 ( % )
```html
```
##### 12. saturate
Type: `String` , `Number`
Required: `false`
Default: 0
Saturates the input image.
Range: 0 ~ 100 ( % )
```html
```
##### 13. sepia
Type: `String` , `Number`
Required: `false`
Default: 0
Converts the input image to sepia.
Range: 0 ~ 100 ( % )
```html
```
##### 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.
```js
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
}
}
}
}
```
```html
```
##### 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
```html
```
##### 16. customData
Type: `Object`
Required: `false`
Default: null
This is used to pass additional information to ``
- on: events to be subscribe of ``
- props: props to be passed to ``
```html
```
```js
methods:{
onLoadEvent(){
//todo
},
customData(){
return {
on: {
load: this.onLoadEvent,
}
}
}
}
```
## Code Example
```html
```
```js
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,
}
}
}
}
}
```
```css
.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;
}
```
## License
Imagvue is licensed under MIT License.