{"id":13494154,"url":"https://github.com/runkids/Imagvue","last_synced_at":"2025-03-28T13:32:22.695Z","repository":{"id":57272378,"uuid":"143562198","full_name":"runkids/Imagvue","owner":"runkids","description":":rice_scene:  Imagvue is an image component for Vue.js","archived":true,"fork":false,"pushed_at":"2018-10-07T03:02:59.000Z","size":6269,"stargazers_count":265,"open_issues_count":1,"forks_count":10,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-22T15:33:06.943Z","etag":null,"topics":["css-filter-wrapper","css-filters","image-filters","javascript","lazy-loading","lazyload-images","vue","vue-components"],"latest_commit_sha":null,"homepage":"https://github.com/runkids/Imagvue","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/runkids.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-04T20:50:37.000Z","updated_at":"2024-01-04T16:25:11.000Z","dependencies_parsed_at":"2022-09-12T16:04:13.027Z","dependency_job_id":null,"html_url":"https://github.com/runkids/Imagvue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2FImagvue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2FImagvue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2FImagvue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2FImagvue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/runkids","download_url":"https://codeload.github.com/runkids/Imagvue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222382486,"owners_count":16975382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-filter-wrapper","css-filters","image-filters","javascript","lazy-loading","lazyload-images","vue","vue-components"],"created_at":"2024-07-31T19:01:22.381Z","updated_at":"2024-10-31T08:31:55.435Z","avatar_url":"https://github.com/runkids.png","language":"JavaScript","readme":"# Imagvue \u003cimg style=\" text-align: center;\" width='45' min-width=\"45\" src=\"https://github.com/runkids/Imagvue/blob/master/demo/Imagvue.png?raw=true\"/\u003e \n\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![npm](https://img.shields.io/npm/v/imagvue.svg)](https://www.npmjs.com/package/imagvue) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/react.svg)](https://github.com/runkids/Imagvue)\n\n- `Imagvue` provides basic image processing props(size,blur,contrast,grayscale, etc.).\n\n- Support image lazy loading.\n\n- All Attributes can bind with data\n\n\u003cimg src=\"https://github.com/runkids/Imagvue/blob/master/demo/Imagvue.gif?raw=true\"/\u003e\n\n## Demo\n\n[![Edit imagvue demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/n7ykx4rxyp?module=%2Fsrc%2FApp.vue\u0026view=preview)\n\n\n## Installation \nGet from npm / yarn:\n```js\nnpm i imagvue\n```\n```js\nyarn add imagvue\n```\nDirectly include [imagvue.min.js](https://cdn.jsdelivr.net/npm/imagvue@0.0.5/dist/imagvue.min.js) to your view like \n\n```html\n\u003cscript src='https://cdn.jsdelivr.net/npm/imagvue@0.0.5/dist/imagvue.min.js'\u003e\u003c/script\u003e\n```\n\n## Usage\n\n##### html:\n```html\n\u003cimagvue v-model=\"url\" width=\"400\" height=\"600\"\u003e\u003c/imagvue\u003e\n```\n\n##### vue file:\n``` js\nimport imagvue from 'imagvue'\n\nexport default {\n  name: 'app',\n  components: {\n    imagvue,\n  },\n  data(){\n    return {\n      url: 'https://source.unsplash.com/random',\n      localURL: require('./imagvue.png'),\n    }\n  }\n}\n```\n\n## Lazy loading Image\n\n[DEMO](https://runkids.github.io/f2e/week2/)\n\n##### how to use ?\nUse `transition-group` and set attribute `src` with your loading image inner `imagvue`.\nAlso you can set attribute`lazy` for delay time.\n\n##### 1. src\nType: `String`\u003cbr\u003e\nRequired: `ture`\u003cbr\u003e\n\nYour loading image.\n\n##### 2. lazy\nType: `Number`\u003cbr\u003e\nDefault: `0`\n\nShow image delay time.\n\n##### 3. rootMargin\n\nType: `String`\u003cbr\u003e\nDefault: `0px`\n\nSyntax similar to that of CSS Margin\n\n[rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)\n\n##### 4. threshold \nType: `Number`\u003cbr\u003e\nDefault: `0`\n\nRatio of element convergence\n\n[threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds)\n\n```html\n  \u003cimagvue\n    v-model=\"url\"\n    :onerror=\"()=\u003eurl='https://i.stack.imgur.com/cl91I.png'\"\n    width=\"400\" \n    height=\"600\"\n  \u003e\n    \u003ctransition-group \n      :src=\"require(loading.gif)\" --\u003e your loading image\n      :lazy=\"500\" --\u003e lazy time , default is 0 ( ms )\n      rootMargin=\"0px 0px\"\n      :threshold=\"0.1\"\n    \u003e\n    \u003c/transition-group\u003e \n  \u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/fZBnjST.gif\"/\u003e\n\n\n##### Browser Support\n\nAvailable in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available, use this [polyfill](https://www.npmjs.com/package/intersection-observer).\n\n\n## Props\n\n#####  1. value\nType: `String`\u003cbr\u003e\nRequired: `ture`\u003cbr\u003e\n\nThe image URL. This is mandatory for the `\u003cimagvue\u003e `\n```html\n\u003cimagvue v-model=\"url\"\u003e\u003c/imagvue\u003e\n```\n\n#####  2. width\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: `auto`\n\nThe intrinsic width of the image in pixels.\n\n#####  3. height\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: `auto`\n\nThe intrinsic height of the image in pixels.\n\n#####  4. onerror\nType: `Function`\u003cbr\u003e\nRequired: `false`\n\nIf an error occurs while trying to load or render an image ,\ncall a function \n\n```html\n\u003cimagvue \n  v-model=\"url\"\n  :onerror=\"()=\u003eurl='./error.png'\"\n\u003e\n\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/gRfQcHz.png\" width='250' min-width=\"250\"/\u003e\n\n#####  5. blur\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 0\n\nApplies a Gaussian blur to the input image.\u003cbr\u003e\nRange: 0 ~ larger value ( px )\n\n```html\n\u003cimagvue v-model=\"url\" :blur=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/NcMztdp.png\"/\u003e\n\n#####  6. contrast\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 100\n\nAdjusts the contrast of the input.\u003cbr\u003e\nRange: 0 ~ over 100 ( % )\n\n```html\n\u003cimagvue v-model=\"url\" :contrast=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/ttFA4g2.png\"/\u003e\n\n#####  7. brightness\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 100\n\nApplies a linear multiplier to input image\u003cbr\u003e\nRange: 0 ~ over 100 ( % )\n\n```html\n\u003cimagvue v-model=\"url\" :brightness=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/GIK27Ec.png\"/\u003e\n\n#####  8. grayscale\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 0\n\nConverts the input image to grayscale.\u003cbr\u003e\nRange: 0 ~ 100 ( % )\n\n```html\n\u003cimagvue v-model=\"url\" :grayscale=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/OB7ulNZ.png\"/\u003e\n\n#####  9. hueRotate\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 0\n\nApplies a hue rotation on the input image.\u003cbr\u003e\nRange: 0 ~ 360 ( deg )\n\n```html\n\u003cimagvue v-model=\"url\" :hue-rotate=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/qMpfv5a.png\"/\u003e\n\n#####  10. invert\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 0\n\nInverts the samples in the input image.\u003cbr\u003e\nRange: 0 ~ 100 ( % )\n\n```html\n\u003cimagvue v-model=\"url\" :invert=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/Xb7cuvT.png\"/\u003e\n\n#####  11. opacity\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 0\n\nApplies transparency to the samples in the input image.\u003cbr\u003e\nRange: 0 ~ 100 ( % )\n\n```html\n\u003cimagvue v-model=\"url\" :opacity=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/71eAINo.png\"/\u003e\n\n#####  12. saturate\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 0\n\nSaturates the input image.\u003cbr\u003e\nRange: 0 ~ 100 ( % )\n\n```html\n\u003cimagvue v-model=\"url\" :saturate=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/kwZp0vz.png\"/\u003e\n\n#####  13. sepia\nType: `String` , `Number`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: 0\n\nConverts the input image to sepia.\u003cbr\u003e\nRange: 0 ~ 100 ( % )\n\n```html\n\u003cimagvue v-model=\"url\" :sepia=\"50\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/o0t9TCD.png\"/\u003e\n\n#####  14. dropShadow\nType: `Object`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: null\n\nApplies a drop shadow effect to the input image.\n\n  - `offset`: This value to set the shadow offset.\n  - `blurRadius`: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.\n  - `spreadRadius`: Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink.\n  - `color`: The color of the shadow.\n\n```js\nexport default {\n  name: 'app',\n  components: {\n    imagvue,\n  },\n  data(){\n    return {\n      dropShadow:{ \n        offset: 16, --\u003e required\n        blurRadius: 0, --\u003e optional default 0 px\n        spreadRadius: 0, --\u003e optional default 0 px\n        color: 'black' --\u003e optional default black\n      }\n    }\n  }\n}\n```\n\n```html\n\u003cimagvue v-model=\"url\" :dropShadow=\"dropShadow\"\u003e\u003c/imagvue\u003e\n```\n\n\u003cimg src=\"https://i.imgur.com/VmnJnXR.png\"/\u003e\n\n#####  15. filters\nType: `Boolean` \u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: true\n\nif you won't to use filters ( blur,contrast,grayscale, etc.).\u003cbr\u003e\njust set props `filters` to false\n\n```html\n\u003cimagvue v-model=\"url\" :filters=\"false\"\u003e\u003c/imagvue\u003e\n```\n\n#####  16. customData\nType: `Object` \u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: null\n\nThis is used to pass additional information to `\u003cimagvue\u003e`\n\n- on: events to be subscribe of `\u003cimagvue\u003e`\n- props: props to be passed to `\u003cimagvue\u003e`\n\n```html\n\u003cimagvue v-model=\"url\" :customData=\"customData()\"\u003e\u003c/imagvue\u003e\n```\n\n```js\nmethods:{\n    onLoadEvent(){\n      //todo\n    },\n    customData(){\n      return {\n        on: {\n          load: this.onLoadEvent,\n        }\n      }\n    }\n}\n```\n\n\n## Code Example\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n      \u003cimagvue class=\"lazyimage\"\n          v-for=\"d in loadUrls\" :key=\"d.url\"\n          :onerror=\"()=\u003ed.url=errorURL\"\n          :value=\"d.url\"\n          width=\"400\" \n          height=\"267\"\n          :blur=\"filters.blur\"\n          :brightness=\"filters.brightness\"\n          :contrast=\"filters.contrast\"\n          :grayscale=\"filters.grayscale\"\n          :hue-rotate=\"filters.rotate\"\n          :opacity=\"filters.opacity\"\n          :invert=\"filters.invert\"\n          :saturate=\"filters.saturate\"\n          :sepia=\"filters.sepia\"\n          :dropShadow=\"dropShadow\"\n          :customData=\"customData()\"\n      \u003e\n        \u003ctransition-group :src=\"d.lazy\" :lazy=\"0\" rootMargin=\"0px 0px\" :threshold=\"0.1\"\u003e\u003c/transition-group\u003e\n      \u003c/imagvue\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```js\n\u003cscript\u003e\nimport imagvue from 'imagvue';\nexport default {\n  components:{\n    imagvue,\n  },\n  data(){\n    return{\n      filters: {\n        blur: 0,\n        contrast: 100,\n        brightness: 100,\n        grayscale: 0,\n        rotate: 0,\n        opacity: 100,\n        invert: 0,\n        saturate: 100,\n        sepia: 0,\n        dropShadow:{ \n          offset: 16,\n          blurRadius: 10, \n          spreadRadius: 10, \n          color: 'black'\n        }\n      },\n      errorURL:'https://cdn.browshot.com/static/images/not-found.png',\n      loadUrls:[\n        {url:'https://goo.gl/PxTSno' , lazy:'https://goo.gl/aiwqia'},\n        {url:'https://goo.gl/K1kZWk' , lazy:'https://goo.gl/vnHTAh'},\n        {url:'https://goo.gl/gTZMkF' , lazy:'https://goo.gl/K1Mheq'},\n        {url:'https://goo.gl/PxTSno1' , lazy:'https://goo.gl/aiwqia'},\n      ]\n    }\n  },\n  methods:{\n    onLoadEvent(){\n      console.log(\"Image on load!\");\n    },\n    customData(){\n      return {\n        on: {\n          load: this.onLoadEvent,\n        }\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n```css\n\u003cstyle\u003e\n.container{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n.lazyimage{\n  max-width: 100%;\n  display: block;\n  margin: 1024px auto 128px;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\u003c/style\u003e\n```\n## License\nImagvue is licensed under MIT License.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunkids%2FImagvue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frunkids%2FImagvue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunkids%2FImagvue/lists"}